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>
</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}'/>
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 location.search
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.
document.getElementById("countryid").value=param1var;
Demo
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 example.com/job?type=web_dev
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>
</select>
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 ) {
$select.empty().append($('<option>'));
$.each(data, function(index, item) {
var model = adapt(item);
var $option = $('<option>');
$option.get(0).selected = model.selected;
$option.attr('value', model.value)
.text(model.text)
.appendTo($select);
});
$select.val(getUrlParameter('rep'));
});
};
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: e.target.value }, () => {
fetchSomeApi(this.state.selectValue).then((res) => {
updateSomewhere(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.
onChange={this.downloadFile)
Related Topics
Change the Background Color When an Input Is Checked
Chrome User Agent Stylesheet Overwriting My Site Style
How to Create a Simple Like Button
Img Src Tag Not Displaying Image
Removing Margin from Flex Items When They Wrap
How to Change Bootstrap 4 Drop-Down Colors
Image Inside Div Has Extra Space Below the Image
How to Center a "Position: Absolute" Element
Two Divs Side by Side - Fluid Display
Fluid Width With Equally Spaced Divs
Angular 6 Component Not Showing Up
How to Prevent Newline At the End of HTML Input Field
Table With Fixed Header and Fixed Column on Pure CSS
Navbar(Menu) Is Getting Overlapped by Body Element
First Name Validation Using HTML 5 Pattern
Children Not Staying Inside Parent Divs
How to Center Text (Horizontally and Vertically) Inside a Div Block