title: Country/Region and City List in a dropdownlist
body: <p>I need to create a dropdownlist with the Region (Asia, South East Asia, North America,..etc) and the Country together in the same dropdownlist.
  Upon selecting the options, then i will populate the City based on the Country selected.</p>
  
  <p>It will look something like this, but in a dropdownlist instead of expanding it out. 
  With Singapore, Australia, Cambodia,etc as Region in my case, and the Cities shown, as Country.
  <img src="https://i.stack.imgur.com/mhSSh.jpg" alt="enter image description here"></p>
  
  <p>Or more specifically, like the following , with Taiwan, Mainland China as Region, and the Cities as Country for my case.:</p>
  
  <p><img src="https://i.stack.imgur.com/9sMuu.jpg" alt="enter image description here"></p>
  
  <p>All my data are pulled from my database, with my RegionTable that looks like this</p>
  
  <p><img src="https://i.stack.imgur.com/N5x0P.jpg" alt="enter image description here"></p>
  
  <p>and my CountryTable like this :</p>
  
  <p><img src="https://i.stack.imgur.com/HtFnK.jpg" alt="enter image description here"></p>
  
  <p>I've got the code working fine for populating the cities based on Country selected, the problem now is that i do not know how to put the region into the same dropdown with the Country. The only problem is how do i add in the Region and making it not selectable because, users should be selecting the Country instead of the Region.</p>
  
  <p>Im using the following code to get my CountryDropDownList</p>
  
  <pre><code>function loadPackage_CountryList() {
  $('#Package_Country option').each(function (i, option) { $(option).remove(); });
  $('#Package_Country').attr('disabled', true);
  $("#Package_Country").append("&lt;option value=''&gt;Downloading...&lt;/option&gt;");
  $.ajax({
      type: "POST", url: PackageWSURL + "/GetPackageCountryList", data: "",
      contentType: "application/json; charset=utf-8", dataType: "json",
      success: function (response) {
          var countries = response.d;
          $('#Package_Country option').each(function (i, option) { $(option).remove(); });
          $('#Package_Country').attr('disabled', false);
          for (var i = 0; i &lt; countries.length; i++) {
              $("#Package_Country").append("&lt;option value='" + countries[i].Value + "'&gt;" + countries[i].Display + "&lt;/option&gt;");
          }
      }
  });
  </code></pre>
  
  <p>}</p>
  
  <p>Anybody can help me on how to add Region into the Dropdownlist?
  Thanks in advance.</p>
  
  <p>--------------Edited----------------------</p>
  
  <p>This is my WebMethod of getting the data from my database.</p>
  
  <pre><code> [WebMethod]
  public List&lt;jsonItem&gt; GetPackageCountryList()
  {
      List&lt;jsonItem&gt; RecordList = new List&lt;jsonItem&gt;();
  
      jsonItem jItemA = new jsonItem();
      jItemA.Display = "All Countries";
      jItemA.Value = "ALL";
      jItemA.Group = "---";
      RecordList.Add(jItemA);
  
      String ConnStr = WebConfigurationManager.ConnectionStrings["TOUR_DB_ConStr"].ConnectionString;
      SqlConnection connection = new SqlConnection(ConnStr);
      connection.Open();
  
      try
      {
          String SQL = "SELECT [CountryList].[CountryCode], [CountryList].[CountryName], [CountryList].[Regioncode] ";
          SQL += "FROM [CountryTable] ";
          SQL += "WHERE [CountryTable].[Activation] = 1 ";
          SQL += "ORDER BY [CountryTable].[Regioncode], [CountryTable].[CountryName]";
          SqlCommand command = new SqlCommand(SQL, connection);
          SqlDataReader dataReader = command.ExecuteReader();
          while (dataReader.Read())
          {
              jsonItem RecordItem = new jsonItem();
  
              RecordItem.Display = dataReader["CountryName"].ToString() + " - " + dataReader["CountryCode"].ToString();
              RecordItem.Value = dataReader["CountryCode"].ToString();
              RecordItem.Group = getRegionName(dataReader["RegionCode"].ToString());
              RecordList.Add(RecordItem);
          }
          dataReader.Close();
      }
      catch { }
      finally
      {
          connection.Close();
      }
  
      return RecordList;
  }
  </code></pre>
  
  <p>I've managed to add in the optgroup from the function below, but the problem now is that i think it will auto add in the <code>&lt;optgroup&gt;</code> at the end of the line even though i've add in the <code>if</code> <code>else</code> function.</p>
  
  <pre><code>function loadPackage_CountryList() {
  $('#Package_Country option').each(function (i, option) { $(option).remove(); });
  $('#Package_Country').attr('disabled', true);
  $("#Package_Country").append("&lt;option value=''&gt;Downloading...&lt;/option&gt;");
  $.ajax({
      type: "POST", url: PackageWSURL + "/GetPackageCountryList", data: "",
      contentType: "application/json; charset=utf-8", dataType: "json",
      success: function (response) {
          var countries = response.d;
          var group = "";
          $('#Package_Country option').each(function (i, option) { $(option).remove(); });
          $('#Package_Country').attr('disabled', false);
          for (var i = 0; i &lt; countries.length; i++) {
              group = countries[i].Group;
              if (group != "---") {
                  $("#Package_Country").append("&lt;optgroup label='" + countries[i].Group + "'&gt;&lt;option value='" + countries[i].Value + "'&gt;" + countries[i].Display + "&lt;/option&gt;");
                  if (group != countries[i].Group)
                  { $("#Package_Country").append("&lt;/optgroup&gt;"); }
                  else { continue; }
  
              }
              else { $("#Package_Country").append("&lt;option value='" + countries[i].Value + "'&gt;" + countries[i].Display + "&lt;/option&gt;"); }
  
  
          }
      }
  });
  </code></pre>
  
  <p>}</p>
  
  <p>so now it looks like this instead </p>
  
  <p><img src="https://i.stack.imgur.com/DJ77z.jpg" alt="enter image description here"></p>
  
  <p>notice how Asia got repeated.</p>