Dynamically reacting to changes in select

Question

I'm building a Spring MVC based webapp in which I'll be using several drop-down menus.

What I'm trying to accomplish is that when the user selects one of the available options, a description of that option will appear next to the select-tag.

<select name="userType">
            <c:forEach items="${userTypes}" var="userType">
                <option>${userType.userType}</option>
            </c:forEach>
        </select><br/><br/>

Next to that I want to have a field that will display something like

${userType.description}

for each of the options in the dropdown.

What would be the best way to do this?

Thanks to anyone taking the time to help me out.

Answer 1

this is more a javascript issue. well you could do it with server side but it would be overkill.

I would use cleint side javascript and jquery, change html/jsp to

<select id="userType" name="userType">
  <c:forEach items="${userTypes}" var="userType">
    <option value=${userType.description}>${userType.userType}</option>
  </c:forEach>
</select><span id="myDivNextSelectTag></span><br/><br/>

... and the jquery

$("#userType").change(function(){
  $("#myDivNextSelectTag").html( $(this).value );
})

There might be some syntax errors, but you should get the idea - you could use data html attribute instead of option value aswell.