jquery set dropdownlist exact text

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.

dropdownlist set exact selected text
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>

Summary: So by using :contains it might not work for multiple items with istance of same text. But we can iterate through dropdown items and then by matching exact text we can set dropdown list text selected.

4 comments :

  1. 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.

    ReplyDelete
  2. Hi avinash,
    I 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?

    ReplyDelete
    Replies
    1. Hello Alok,

      You 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

      Delete