Selecting an Option in a Dropdown List Using Request Parameters

selecting an option in a dropdown list using request parameters

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>

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:

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

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}" />

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 value="2"
<c:if test="${param.selectValue == 2})"> selected </c:if> >
option 2

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

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

How do you auto-select a select drop-down list with values based on URL parameters on page load?

Since you're dealing with <option>s of a <select> here, you'll need to assign the attribute selected to the chosen one.

Second, since you're dealing with <option>s, the attribute is called value instead of val. (That's important if you submit the <form>)

So, your code would be along these lines:

jQuery('.page-enroll select[name="batch"] option[val="' + service + '-' + batch + '"]').attr("selected", true)

Tested on your website :-)

Some other small suggestions: By using you can just read the part after ? (and perhaps save some Regular expression, e.g. by splitting on & and =).

Dynamically set the value of select dropdown using query string paramater

You can just do it this way by setting the value of the select element. Also note that value is case sensitive, plus make sure that the function displayresult runs on onload or after the element appeared in the html.



As a selection the option present in the drop-down menu to the value we get from the parameter we pass in the URL

Assign name_url to the .value property of the select.

let url_string = window.location.href;
let url2 = new URL(url_string);
let name_url = url2.searchParams.get("name");
document.getElementById("your-select").value = name_url;

Set a dropdown list value = url parameter

If your URL is like

In your view, you can do:

    <select name="job" id="job">
<option @if(Input::get('type')=='web_dev') selected @endif value="web_dev> Web Dev </option>
<option @if(Input::get('type')=='soft_engine') selected @endif value="soft_engine> Web Dev </option>
<option @if(Input::get('type')=='marketing') selected @endif value="marketing> Web Dev </option>

populate first option of dropdown with URL parameter

maybe you can just set the select.value only after the select is initialized, like this:

function initializeSelect($select, uri, adapt){     
$.getJSON( uri, function( data ) {
$.each(data, function(index, item) {
var model = adapt(item);
var $option = $('<option>');
$option.get(0).selected = model.selected;
$option.attr('value', model.value)

Passing selected value of Dropdown into API in react

You should fetch API after the update of the selected state.

downLoadFile(e) {
this.setState({ selectValue: }, () => {
fetchSomeApi(this.state.selectValue).then((res) => {
}).catch((error) => console.error(error));
alert(this.state.selectValue); // < --- changes this line

this.setState has second parameter as callback. So you could use that for after state update event.

Also, you can update the function call.


Related Topics

Leave a reply