We have seen how to set selected option in dropdown list by text here set dropdownlist selected option by text.
In that example we used :contains selector that will look for the text and the set text in dropdownlist as selected.
But if dropdownlist have items with same texts instance then :contains selector will get all the items with matched text. This might show last matched item selected in dropdownlist. In
this case we need to use alternate way to get exact text in dropdownlist and then set it selected.
Example to set selected option in dropdown by exact text [jquery]
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<title>set dropdown value</title>
<script type="text/javascript">
$(document).ready(function () {
$("#go").click(function () {
var inputText = $("#inputText").val();
$("#numbers").each(function () {
$('option', this).each(function () {
if ($.trim($(this).text().toLowerCase()) == $.trim(inputText.toLowerCase())) {
$(this).attr('selected', 'selected');
};
});
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<label>Enter value from dropdown</label>
<input type="text" id="inputText" />
<asp:DropDownList ID="numbers" runat="server">
<asp:ListItem Text="This is one" Value="1"></asp:ListItem>
<asp:ListItem Text="This is one?" Value="2"></asp:ListItem>
<asp:ListItem Text="This is three" Value="3"></asp:ListItem>
</asp:DropDownList>
</div>
<input type="button" id="go" value="Go" />
</form>
</body>
</html>
I think one should always be sure while looking at the appropriate factor when testing. i tried this but didn't worked for me. I think I was on a wrong dropdown.
ReplyDeleteWhat problem you faced?
DeleteHi avinash,
ReplyDeleteI am using simple html and i want to do this:
1. My website visitor type his roll number in input text field.
2. Then select box automatically show the correct subject according to the roll number entered by visitor in text field.
For example:
Enter Roll no: [input type="text" name="rollno" ]
Choose subject: [select name="subject" id="subject" ]
[option value="1">Electronics[/option]
[option value="2">Maths[/option]
[/select]
so when visitor enter roll no 1 in text box then select box automatically changes to Electronics and if he enter 2 in text box then select box automatically changes to Maths.
Please help me how to do this?
Hello Alok,
DeleteYou can use .keyup event of textbox in your situation. In keyup take value from textbox and assign that value to the value of dropdown like:
$(document).ready(function () {
$("#topics").keyup(function () {
var value = $("#topics").val();
if (value == "" || isNaN(value))
value = 0;
$("#topics1").val(value);
});
});
Check running code here: http://www.codegateway.com/2013/04/set-dropdown-text-selected-from-textbox.html