[RESOLVED]Set dropdown's value

I;m trying to get the dropdown’s value set. Can you help? Sorry for the jumbled code. I’m doing a lot of experimentation.
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title></title>
    <script type ="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type ="text/javascript">

      jQuery(document).ready(function () {
          alert(jQuery(‘p’).text());

          $(‘input:radio[name=cars]‘)[0].checked = true;
         // $(‘input:radio[name=cars]:nth(0)’).attr(‘checked’, true);
          $(‘#CheckBox1′).prop(‘checked’, ‘true’);
          //Attach click event handler to checkbox
          $(‘#CheckBox1′).click(function () {
              alert(‘Hello’);
              $(‘#DropDownList1′).val("10");
              $(‘#DropDownList1′).val("20");
          });
          $(‘#CheckBox2′).click(function () {
              if ($(‘#CheckBox1′).prop(‘checked’, ‘true’)) {
                  alert(‘CheckBox1 checked’);
              }
              $(‘#CheckBox1′).prop(‘checked’, ‘true’)
              alert(‘Hello2′);
              $(‘#TextBox1′).val("10");
              $(‘#DropDownList1′).val("20");
              $(‘input:radio[name=cars]:nth(0)’).attr(‘checked’, true);
          });
          $(function () {
              var myArray = ["one", "two", "three", "four", "five"];
              $.each(myArray, function (index, value) {
                  alert(‘in each’ + ‘ ‘ + value);
              });
              if ($(‘#TextBox1′).val() == ’2′)
                  alert(‘got one’);

          });
      });

  </script>
</head>
<body>
    <form id="form1" runat="server">
    <p>The DOM is ready!</p>
    <asp:CheckBox ID="CheckBox1" runat="server" />
   <asp:CheckBox ID="CheckBox2" runat="server" />
  <asp:TextBox ID="TextBox1" value = "1" runat="server" />
    <div>
        <asp:RadioButton ID="RadioButton1" name = "cars" Text= "Corvette" runat="server" />
         <asp:RadioButton ID="RadioButton2" name = "cars" Text= "Corolla" runat="server" />
        <asp:DropDownList ID="DropDownList1" runat="server">
        </asp:DropDownList>
    
    </div>
    </form>
</body>
</html>

Probably the ID is being generated in a different way on the client . Can you try :

$("#<%=DropDownList1.ClientID %>").val(’10′);

This would bind the ID to the selector as is being generated at client side.

You can use the below code add value to dropdownlist using Jquery

$('#CheckBox1').click(function () {
                alert('Hello');
               // $('#DropDownList1').val("10");
                //$('#DropDownList1').val("20");
                var newOption10 = "<option value='"+"10"+"'>10</option>";
                $("#DropDownList1").append(newOption10);
                var newOption20 = "<option value='"+"20"+"'>20</option>";
                $("#DropDownList1").append(newOption20);
            });

Your Complete Code:

<script>
        jQuery(document).ready(function () {
            alert(jQuery('p').text());

            //$('input:radio[name=cars]')[0].checked = true;
            //Select the RadioButton 1
            $("#RadioButton1").prop('checked', true);
            // $('input:radio[name=cars]:nth(0)').attr('checked', true);
            $('#CheckBox1').prop('checked', 'true');
            //Attach click event handler to checkbox
            $('#CheckBox1').click(function () {
                alert('Hello');
               // $('#DropDownList1').val("10");
                //$('#DropDownList1').val("20");
                var newOption10 = "<option value='"+"10"+"'>10</option>";
                $("#DropDownList1").append(newOption10);
                var newOption20 = "<option value='"+"20"+"'>20</option>";
                $("#DropDownList1").append(newOption20);
            });


            $('#CheckBox2').click(function () {
                if ($('#CheckBox1').prop('checked', 'true')) {
                    alert('CheckBox1 checked');
                }
                $('#CheckBox1').prop('checked', 'true')
                alert('Hello2');
                $('#TextBox1').val("10");
                //$('#DropDownList1').val("20");
                var newOption20 = "<option value='" + "20" + "'>20</option>";
                $("#DropDownList1").append(newOption20);
                $('input:radio[name=cars]:nth(0)').attr('checked', true);
            });
            $(function () {
                var myArray = ["one", "two", "three", "four", "five"];
                $.each(myArray, function (index, value) {
                    alert('in each' + ' ' + value);
                });
                if ($('#TextBox1').val() == '2')
                    alert('got one');

            });
           
        });

  </script>

Generally, you can just set the value for the DropDown element in jQuery using the .val() property. Since you are working with ASP.NET Controls, it might help to use the ClientID property to target them as follows :

$('#<%= DropDownList1.ClientID %>').val("20");

This should select the appropriate value assuming an <option> element exists that matches the value specified.

Leave a Reply