Showing posts with label jQuery dropdown. Show all posts
Showing posts with label jQuery dropdown. Show all posts

Set dropdown text selected from textbox value

In some cases we need to set dropdown list items exact text by matching the value entered in textbox. For that purpose we can use .keyup event in jQuery. In .keyup event simply take the value of textbox and assign that value to the value of dropdown. Once you set value it's corresponding text will be get displayed as selected.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <title>Get dropdown value</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#topics").keyup(function () {
                var value = $("#topics").val();
                if (value == "" || isNaN(value))
                    value = 0;
                $("#topics1").val(value);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:TextBox runat="server" ID="topics"></asp:TextBox>
    <br/><br/>
      <asp:DropDownList ID="topics1" runat="server">
     <asp:ListItem Text="--Select--" Value="0"></asp:ListItem>
    <asp:ListItem Text="C#" Value="1"></asp:ListItem>
    <asp:ListItem Text="jQuery" Value="2"></asp:ListItem>
    <asp:ListItem Text="ASP.NET" Value="3"></asp:ListItem>
    </asp:DropDownList>
    </div>
    </form>
</body>
</html>

Note: You may need some additional validations if user enters data in textbox that does not match to the values in dropdown. Ex. I have just validated in above code if user enters characters other than number using IsNaN


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.

Dropdownlist set selected value

In this post we will see in jquery how toset dropdown list value or selected option by it's value. For that we simply need to get object of dropdown list in jquery and then we can set selected option by using val(). of dropdownlist.

jquery dropdownlist set selected value

Example: set dropdown list selected option by value [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>jQuery set dropdown list selected option by value</title>
    <script type="text/javascript">
      $(document).ready(function () {
        $("#go").click(function () {
          var inputText = $("#inputText").val();
          $("#numbers").val(inputText);
        });
      });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <label>Enter value between 1-3</label>
      <input type="text" id="inputText"/>
    <asp:DropDownList ID="numbers" runat="server">
    <asp:ListItem Text="1" Value="1"></asp:ListItem>
    <asp:ListItem Text="2" Value="2"></asp:ListItem>
    <asp:ListItem Text="3" Value="3"></asp:ListItem>
    </asp:DropDownList>
    </div>
    <input type="button" id="go" value="Go" />
    </form>
</body>
</html>

Summary: So in short we can use jquery to set dropdownlist item value like $("#numbers").val(inputText);. we can also set dropdown list selected option by using text like Set selected value by text.

Set selected option by text of dropdownlist


In this post we will see how to set selected option by text to dropdownlist. In web application we need to set dropdownlist value at client side. By using option property of dropdown list we will check if dropdown contains text that we want to set And after that using selected attribute we will set it true so that it will show the option selected that we have set using text.
set selected option in dropdownlist using jquery

Sample to set selected option by text to dropdownlist[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 dropdownlist selected option by text</title>
    <script type="text/javascript">
      $(document).ready(function () {
        $("#go").click(function () {
         var inputText = $("#inputText").val();
          $("#numbers option:contains(" + inputText + ")").attr('selected', 'selected'); 
        });
      });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <label>Enter value between 1-3</label>
      <input type="text" id="inputText"/>
    <asp:DropDownList ID="numbers" runat="server">
    <asp:ListItem Text="1" Value="1"></asp:ListItem>
    <asp:ListItem Text="2" Value="2"></asp:ListItem>
    <asp:ListItem Text="3" Value="3"></asp:ListItem>
    </asp:DropDownList>
    </div>
    <input type="button" id="go" value="Go" />
    </form>
</body>
</html>


Summary:By using $("#numbers option:contains(" + inputText + ")").attr('selected', 'selected'); we have dynamically set the selected option of a drop-down list using JQuery.We can set selected option of dropdown list by it's value likeset selected option of dropdown box by value

Assign dropdown value to other dropdown in jquery

set dropdown value to other dropdown in jquery
While woking with clientside stuff in asp.net we need to assign value of one dropdown to other dropdown. In this post we will see how to assign dropdown value to other dropdown.

Example to assign value from dropdown to other dropdown.

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<title>Get dropdown value</title>
<script type="text/javascript">
$(document).ready(function () {
$("#topics").change(function () {
var text = $("#topics option:selected").text();
var value = $("#topics option:selected").val();
$("#topics1").val(value);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="topics" runat="server">
<asp:ListItem Text="C#" Value="1"></asp:ListItem>
<asp:ListItem Text="jQuery" Value="2"></asp:ListItem>
<asp:ListItem Text="ASP.NET" Value="3"></asp:ListItem>
</asp:DropDownList>

<br/><br/>
<asp:DropDownList ID="topics1" runat="server">
<asp:ListItem Text="C#" Value="1"></asp:ListItem>
<asp:ListItem Text="jQuery" Value="2"></asp:ListItem>
<asp:ListItem Text="ASP.NET" Value="3"></asp:ListItem>
</asp:DropDownList>
</div>
</form>
</body>
</html>
Output

Get dropdown selected item onchange in jQuery

get dropdown list selected item onchange in jquery
When using dropdown list in asp.net application, we need to get value of selected item on onchange event of dropdown. In this post we will see example of how to get value of selected item using onchange event of dropdown.

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<title>Get dropdown value</title>
<script type="text/javascript">
$(document).ready(function () {
$("#topics").change (function () {
var text = $("#topics option:selected").text();
var value = $("#topics option:selected").val();
alert("Selected text=" + text + " Selected value= " + value);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="topics" runat="server">
<asp:ListItem Text="C#" Value="1"></asp:ListItem>
<asp:ListItem Text="jQuery" Value="2"></asp:ListItem>
<asp:ListItem Text="ASP.NET" Value="3"></asp:ListItem>
</asp:DropDownList>
</div>
</form>
</body>
</html>
Output

Get dropdownlist selected value in jQuery

get dropdownlist selected value in jquery
In web application we need to get dropdown value at client side. We will see the example of how to get dropdown value in jQuery.

Code to get dropdown value in jQuery


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> type="text/javascript"> </script>
  <title>Get dropdown value</title>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#go").click(function () {
        var text = $("#numbers option:selected").text();
        var value = $("#numbers option:selected").val();
        alert("Selected text=" + text + " Selected value= " + value);
      });
    });
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <asp:DropDownList ID="numbers" runat="server">
      <asp:ListItem Text="1" Value="1"></asp:ListItem>
      <asp:ListItem Text="2" Value="2"></asp:ListItem>
      <asp:ListItem Text="3" Value="3"></asp:ListItem>
    </asp:DropDownList>
  </div>
  <input type="button" id="go" value="Go" />
  </form>
</body>
</html>