selecting an option in a dropdown list using request parameters

Question

I'm kind of new to this so please bear with me. I have a value from the db which needs to set the currently selected value in a dropdown .this is passed to the front end as a request parameter. I tried using selected="parameter" attribute with the select tag but doesnt seem to work. I also tried value="", no result. Any help is appreciated. Thanks

Answer 1

If you want to serve the jsp with a selected value in the <select>, put the selected attribute in the corresponding option.

<select id="dropdown">
  <option value="1">option 1</option>
  <option value="2" selected>option 2</option>
  <option value="3">option 3</option>
</select>

Use the JSTL tag <c:if> to test for equality between the request parameter and the current value. For instance, with a request parameter named selectValue:

<option 
    <c:if test='${param.selectValue == currentOption}'> selected </c:if>
>
</option

Take a look at the following question for details: Selected item populating in Select tag using JSTL?

To elaborate on the matter, in case you're building your options dinamically (<c:forEach>), while looping the options, output selected in the <option> when the current <option>'s value is equal to the request parameter (code untested):

<select id="dropdown">
    <c:forEach var="item" items="${list}">
        <option value="<c:out value='${item}' />"
            <c:if test="${param.selectValue == item})"> selected </c:if>  >
            <c:out value="${item}" />
        </option>
    </c:forEach>
</select>

In case the options are static, you could add something like this in each <option> (code untested):

  <option value="1" 
    <c:if test="${param.selectValue == 1})"> selected </c:if> >
    option 1 
  </option>
  <option value="2" 
    <c:if test="${param.selectValue == 2})"> selected </c:if> >
    option 2
  </option>

If you want to set the selected value through javascript, use for instance

document.getElementById("dropdown").value = <c:out value='${param.selectValue}'/>

Answer 2

To the point, you need to set the selected attribute only whenever the submitted value matches the selected value. Cleanest would be to use the conditional operator ?: in EL for this as using JSTL <c:if> would end up in clumsy and hard-to-read code.

Here's an example:

<select name="foo">
    <option value="1" ${param.foo == '1' ? 'selected' : ''}>One</option>
    <option value="2" ${param.foo == '2' ? 'selected' : ''}>Two</option>
    <option value="3" ${param.foo == '3' ? 'selected' : ''}>Three</option>
</select>

Please note that the foo in ${param.foo} must exactly match name of <select name="foo">. Please also note that the ${param.foo} value must exactly match the value of <option value>. The usage of id as suggested in other answer is irrelevant here. It's only relevant for the client side. IDs aren't used as request parameter names or values at all.

Answer 3

You can solve this with javascript and jquery. After the page was rendered you simply update the select box and set the value provided in a param. See the following jsp/jquery example:

<select id="dropdown">
  <option value="1">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>

<script type="text/javascript">
$(document).ready(function() {
   // set select options with jquery and EL
   $("#dropdown").val("${param.foo}");
});
</script>

In a JSF/Facelets page you can use this EL syntax (replace ${} with #{})

$("#dropdown").val("#{param.foo}");