Set DropDownList value based on text/value in Java Script
Introduction:
In this article i will explain how to set DropDownList value based on text/value in Java Script.
Description:
In previous articles i explained How to clear items from DropDownList (or) Select in Java Script, How to clear items from DropDownList (or) Select in jQuery, How to get selected index from DropDownList (or) Select in Java Script, How to get selected index from DropDownList (or) Select in jQuery, How to get selected text/value from DropDownList (or) Select in Java Script, and How to get selected text/value from DropDownList (or) Select in jQuery. Now i will explain how to set DropDownList value based on text/value in Java Script.
Set DropDownList value based on text in Java Script:
We can set DropDownList value based on text by using below function:
Script:
function setSelectedIndexByText(d, t){
for(var i = 0; i < d.options.length; i++){
if(d.options[i].text == t){
d.options[i].selected = true;
return;
}
}
}This function takes two parameters d, t. d means dropdown, t means text for which you want to set. This function checks for each option present in the dropdown, option text matches with the text what we are passing to the function will be set as selected and it comes out from the loop.
var ddl = document.getElementById('ddlRole');
// Now set dropdown selected option to 'Admin'.
setSelectedIndexByText(ddl, 'Admin');In the above code we are finding dropdown first, then we are sending two parameters dropdown and text to setSelectedIndexByText function. Now it will set the Admin as selected text for drop down.
Set DropDownList value based on value in Java Script:
We can set DropDownList value based on value by using below function:
Script:
// This function is used to set the dropdown index based on value.
function setSelectedIndexByValue(d, v){
for(var i = 0; i < d.options.length; i++){
if(d.options[i].value == v){
d.options[i].selected = true;
return;
}
}
}This function takes two parameters d, v. d means dropdown, v means value for which you want to set. This function checks for each option present in the dropdown, option value matches with the value what we are passing to the function will be set as selected and it comes out from the loop.
var ddl = document.getElementById('ddlRole');
// Now set dropdown value to 3.
setSelectedIndexByValue(ddl, 3);In the above code we are finding dropdown first, then we are sending two parameters dropdown and value to setSelectedIndexByValue function. Now it will set the Super Admin as selected where Super Admin value is 3.
You can also find the complete example as shown below with screen shots:
Full Source Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>How to set DropDownList value based on text/value in Java Script</title>
<script type="text/javascript">
function SetDropDownByText() {
var ddl = document.getElementById('ddlRole');
// Now set dropdown selected option to 'Admin'.
setSelectedIndexByText(ddl, 'Admin');
}
function SetDropDownByValue() {
var ddl = document.getElementById('ddlRole');
// Now set dropdown value to 3.
setSelectedIndexByValue(ddl, 3);
}
// This function is used to set the dropdown index based on text.
function setSelectedIndexByText(d, t){
for(var i = 0; i < d.options.length; i++){
if(d.options[i].text == t){
d.options[i].selected = true;
return;
}
}
}
// This function is used to set the dropdown index based on value.
function setSelectedIndexByValue(d, v){
for(var i = 0; i < d.options.length; i++){
if(d.options[i].value == v){
d.options[i].selected = true;
return;
}
}
}
</script>
</head>
<body>
<div>
<select id="ddlRole" class="form-control">
<option value="-1">Select</option>
<option value="1">User</option>
<option value="2">Admin</option>
<option value="3">Super Admin</option>
</select>
<input type="button" value="Set By Text" onclick="SetDropDownByText()" />
<input type="button" value="Set By Value" onclick="SetDropDownByValue()" />
</div>
</body>
</html>Output:
This will be initial screen when we open it in browser.
When Set By Text button clicked, it will call the setSelectedIndexByText function and takes two parameters d means dropdown and t means text for which you want to set. Now it will set the Admin as selected text for drop down.
When Set By Value button clicked, it will call the setSelectedIndexByValue function and passes two parameters d means dropdown and v means value for which you want to set. Now it will set the Super Admin as selected where Super Admin value is 3.
-
CreatedNov 11, 2014
-
UpdatedOct 03, 2020
-
Views2,390