title: How to get dropdownlist selected value bind using jquery in asp.net?
body: <p>I am working on asp.net application in which I want to add Products. Here is my design</p>
  
  
  
  <pre><code>&lt;script type="text/javascript" language="javascript"&gt;
      function BindSubCategory() {
  
          var SubCategory = document.getElementById('&lt;%= ddlCategory.ClientID%&gt;');
  
          //alert(City.value);
          $.ajax({
              type: "POST",
              contentType: "application/json; charset=utf-8",
              url: "/Admin/Add_Products.aspx/BindDatatoSubCategory",
              data: "{'Category':'" + SubCategory.value + "'}",
              dataType: "json",
              async: true,
              success: OnBrandSuccess,
              error: OnBrandError,
              failure: function (Data) {
                  alert('Fail');
              }
          });
          function OnBrandSuccess(data) {
              //            alert('Success');
              //            $.each(data.d, function (key, value) {
              //                $("#ddlSubCategory").append($("&lt;option&gt;&lt;/option&gt;").val(value.SubCatID).html(value.SubCategoryName));
              //            });
              var Dropdown = $('#&lt;%=ddlSubcategory.ClientID %&gt;');
              Dropdown.append(new Option("Select", 0));
              $.each(data.d, function (key, value) {
                  Dropdown.append($("&lt;option&gt;&lt;/option&gt;").val(value.SubCatID).html(value.SubCategoryName));
              });
  
          }
          function OnBrandError(Data) {
              alert(Data.d);
          }
  
      }
  &lt;/script&gt;
  &lt;h2 runat="server" id="HTitle"&gt;
      Add Products&lt;/h2&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
          &lt;div class="table-wrapper"&gt;
           &lt;table class="table table-bordered table-hover"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          Category
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;asp:DropDownList ID="ddlCategory" runat="server" CssClass="form-control" onchange="javascript:BindSubCategory()"&gt;
                          &lt;/asp:DropDownList&gt;
                          &lt;asp:RequiredFieldValidator ID="RequiredFieldValidatorg43" runat="server" ControlToValidate="ddlCategory"
                              Display="Dynamic" SetFocusOnError="true" InitialValue="0" ErrorMessage="Select Category"&gt;&lt;/asp:RequiredFieldValidator&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          Subcategory
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;asp:DropDownList ID="ddlSubcategory" runat="server" DataValueField="SubCatID"  CssClass="form-control" onchange="javascript:Check()"&gt;
                          &lt;/asp:DropDownList&gt;
                          &lt;asp:RequiredFieldValidator ID="RequiredFieldValidator44" runat="server" ControlToValidate="ddlSubcategory"
                              Display="Dynamic" SetFocusOnError="true" ErrorMessage="Select Subsategory"&gt;&lt;/asp:RequiredFieldValidator&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                      &lt;td&gt;
                          Product Name
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;asp:TextBox ID="txtProductName" runat="server" CssClass="form-control"&gt;
                          &lt;/asp:TextBox&gt;
                          &lt;asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txtProductName"
                              Display="Dynamic" SetFocusOnError="true" ErrorMessage="Enter Product Name"&gt;&lt;/asp:RequiredFieldValidator&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          Cost
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;asp:TextBox ID="txtCost" runat="server" CssClass="form-control"&gt;
                          &lt;/asp:TextBox&gt;
                          &lt;asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtCost"
                              Display="Dynamic" SetFocusOnError="true" ErrorMessage="Enter Cost"&gt;&lt;/asp:RequiredFieldValidator&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          Discount
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;asp:TextBox ID="txtDiscount" runat="server" CssClass="form-control"&gt;
                          &lt;/asp:TextBox&gt;
                          &lt;asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtDiscount"
                              Display="Dynamic" SetFocusOnError="true" ErrorMessage="Enter Discount"&gt;&lt;/asp:RequiredFieldValidator&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;table class="table table-bordered table-hover" style="margin-top: -2%"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          Product Description
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;CKEditor:CKEditorControl ID="CKEditor1" runat="server"&gt;
                          &lt;/CKEditor:CKEditorControl&gt;
                          &lt;asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" SetFocusOnError="true"
                              ErrorMessage="Enter Product Description" ControlToValidate="CKEditor1" Display="Dynamic"&gt;&lt;/asp:RequiredFieldValidator&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                              &lt;input type="button" name="Cancel" value="Cancel" id="Button2"  runat="server" onserverclick="btnSave_ServerClick"  class="btn-success btn" /&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;asp:Label ID="lblMsg" runat="server" Visible="false"&gt;&lt;/asp:Label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my code:-</p>
  
  <pre><code>protected void btnSave_ServerClick(object sender, EventArgs e)
      {
          try
          {
              Products objProducts as New Products();
  
              objProducts.CategoryID = Convert.ToInt32(ddlCategory.SelectedValue);
              objProducts.SubCategory = Convert.ToInt64(ddlSubcategory.SelectedValue);
              objProducts.ProductName = txtProductName.Text;
              objProducts.Description = Server.HtmlEncode(Regex.Replace(CKEditor1.Text, "(?i)&lt;/?div[^&gt;]*&gt;", ""));
              objProducts.Price = Convert.ToDecimal(txtCost.Text);
              objProducts.Discount = Convert.ToDecimal(txtDiscount.Text);
  
              if (Page.RouteData.Values["ID"] != null)
              {
                  objProducts.ProductID = Convert.ToInt32(Page.RouteData.Values["ID"].ToString());
                  objProducts.Flag = "U";
                  objProducts.UpdatedBy = Session["Admin"].ToString();
                  objProducts.AddedBy = "NA";
              }
  
              else
              {
                  objProducts.UpdatedBy = "NA";
                  dt = new Products().SelectDuplicate(objProducts.CategoryID, objProducts.SubCategory, objProducts.ProductName);
                  if (dt.Rows.Count &gt; 0)
                  {
                      objProducts.Flag = "D";
                  }
                  else
                  {
                      objProducts.Flag = "I";
                      objProducts.AddedBy = Session["Admin"].ToString();
                  }
              }
              if (objProducts.Flag.Equals("D"))
              {
                  lblMsg.Visible = true;
                  lblMsg.Text = "This Products already exists. please enter another Product.";
              }
              else
              {
                  retval = new Products().insert(objProducts);
                  if (retval &gt; 0)
                  {
                      if (objProducts.Flag.Equals("I"))
                      {
  
                      }
                      lblMsg.Visible = true;
                      lblMsg.Text = "Successfully saved..";
                  }
              }
          }
          catch (Exception ex)
          {
              throw (ex);
          }
  
      }
  </code></pre>
  
  <p>Here is WebMethod:</p>
  
  <pre><code>[WebMethod]
      public static SubCategory[] BindDatatoSubCategory(string Category)
      {
          DataTable dt = new DataTable();
          List&lt;SubCategory&gt; details = new List&lt;SubCategory&gt;();
  
          dt = new SubCategory().SelectByCategory(Convert.ToInt32(Category));
  
          foreach (DataRow dtrow in dt.Rows)
          {
              SubCategory objSubCategory = new SubCategory();
              objSubCategory.SubCatID = Convert.ToInt64(dtrow["SubCatID"].ToString());
              objSubCategory.SubCategoryName = dtrow["SubCategory"].ToString();
              details.Add(objSubCategory);
          }
          return details.ToArray();
      }
  </code></pre>
  
  <p>When I select any item from <code>ddlCategory</code> then the <code>ddlSubCategory</code> is binded according to selected value of <code>ddlCategory</code>. The Binding of <code>ddlSubCategory</code> is done on change event of <code>ddlCategory</code> using Jquery. The binding is working properly but When I click on the button the selectedvalue of <code>ddlSubCategory</code> is always comes null in Code behind window.</p>