title: Get the value of selected items in dynamically created dropdownlist into an array
body: <p>I have two dropdownlists namely ddlCountry and ddlState. I am using jquery clone() method to create dynamic dropdownlist controls of the ddlCountry and ddlState dropdownlists.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;body&gt;
  &lt;form id="form1" runat="server"&gt;
      &lt;asp:Panel ID="ddlPanel" runat="server"&gt;
          &lt;div&gt;
              &lt;asp:Button ID="btnClone" Text="Clone" runat="server" /&gt;
          &lt;/div&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;Cateogry:
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;div&gt;
                          &lt;asp:DropDownList ID="ddlCountryList" runat="server" class="ddlCountryClass"&gt;&lt;/asp:DropDownList&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td&gt;SubCategory:
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;div&gt;
                          &lt;asp:DropDownList ID="ddlStateList" runat="server" class="ddlStateClass"&gt;&lt;/asp:DropDownList&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;div id="target"&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;div id="target2"&gt;
                      &lt;/div&gt;
  
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;asp:Button ID="btnGet" runat="server" Text="Get Values" OnClick="GetDropDownListValues" /&gt;           
  
      &lt;/asp:Panel&gt;
  &lt;/form&gt;
  
  &lt;script type="text/javascript"&gt;
      $(function () {
          $("[id*=btnClone]").bind("click", function () {
              var index = $("#target select").length + 1;
              //Clone the DropDownList
              var ddl = $("[id$=ddlCountryList]").clone(true);
              //Set the ID and Name
              ddl.attr("id", "ddlCountryList_" + index);
              ddl.attr("name", "ddlCountryList_" + index);
              ddl.append('&lt;option selected="selected" value="0"&gt;Select Country&lt;/option&gt;');
              //[OPTIONAL] Copy the selected value
              var selectedValue = $("[id$=ddlCountryList] option:selected").val();
              ddl.find("option[value = '" + selectedValue + "']").attr("selected", "selected");
              //Append to the DIV.
              $("#target").append(ddl);
              $("#target").append("&lt;br /&gt;&lt;br /&gt;");
              return false;
          });
      });
      $(function () {
          $("[id*=btnClone]").bind("click", function () {
              var index = $("#target2 select").length + 1;
              var ddl = $("[id$=ddlStateList]").clone();
              ddl.attr("id", "ddlStateList_" + index);
              ddl.attr("name", "ddlStateList_" + index);
              var selectedValue = $("[id$=ddlStateList] option:selected").val();
              ddl.find("option[value = '" + selectedValue + "']").attr("selected", "selected");
              $("#target2").append(ddl);
              $("#target2").append("&lt;br /&gt;&lt;br /&gt;");
              return false;
          });
      });
      //  Make Ajax call to fetch the state values.
      $(function () {
  
          $('#ddlStateList').attr('disabled', 'disabled');
          $('#ddlStateList').attr('disabled', 'disabled');
          $('#ddlStateList').append('&lt;option selected="selected" value="0"&gt;Select State&lt;/option&gt;');
          $('#ddlCountryList').change(function () {
              var $countryDropdown = $(this); // "this" is the event source
              var country = $countryDropdown.val();
              // Figure out the index of the country dropdown
              var index = $countryDropdown.attr('id').split("_")[1] || "";
              if (index) {
                  index = "_" + index;
              }
              var $stateDropdown = $("#ddlStateList" + index);
              $stateDropdown.removeAttr("disabled");
              $.ajax({
                  type: "POST",
                  url: "Default.aspx/BindStates",
                  data: "{'country':'" + country + "'}",
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  success: function (msg) {
                      var j = jQuery.parseJSON(msg.d);
                      var options;
                      for (var i = 0; i &lt; j.length; i++) {
                          options += '&lt;option value="' + j[i].optionValue + '"&gt;' + j[i].optionDisplay + '&lt;/option&gt;'
                      }
  
                      $stateDropdown.html(options)
                  },
                  error: function (data) {
                      alert('Something Went Wrong')
                  }
              });
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p>I want to store the selected value of each in the country dropdownlists(not of ddlstate) such as ddlCountry,ddlcountry_1,ddlcountry_2 and so on....in an array.</p>
  
  <p>How can i achieve it?</p>