title: jQuery Populating Select List Using Ajax Causes the Width to Change
body: <p>I am having a real weird issue. I have a dropdownlist which has a certain width. I use an Ajax call to populate the dropdownlist and when the dropdownlist is populated it reduces in width. For some reason the size of the dropdownlist changes (size of the dropdownlist reduces) when it is populated with options. </p>
  
  <p><strong>JavaScript:</strong> </p>
  
  <pre><code>var serialNumberDropDownList = $("&lt;select&gt;&lt;/select&gt;");
      serialNumberDropDownList.attr("id","SerialNumberDropDownList_" + index);
  
      serialNumberDropDownList.addClass("DropDownListStyle");
  
      serialNumberDropDownList.append($("&lt;option&gt;&lt;/option&gt;").attr("value", "").text("Please select Serial Number"));
  
  
   serialNumberDropDownList.click(function() {
  
          if ($(this).children().length &gt; 1) return false;        
  
          populateSerialNumberDropDownList();         
  
      });
  
  
  function populateSerialNumberDropDownList() {
  
  
      $.ajax(
              {
                  type: "POST",
                  url: "../SomeWebService",
                  dataType: "json",
                  data:"{}" ,  
                  contentType: "application/json",
                  success: function(response) {
  
                      var data = JSON.parse(response.d);
  
                      for (i = 0; i &lt; data.length; i++) {
  
                          serialNumberDropDownList.append($("&lt;option&gt;&lt;/option&gt;").text(data[i]).val(data[i]));
                      }
  
                  },
                  error: function(xhr) {
                      var res = eval("(" + xhr.responseText + ")");
                      alert(res.Message);
                  }
              });
  
  
  }
  
  **CSS:** 
  
  .DropDownListStyle 
  {
      font-family:Verdana;
      font-size:10px;
      width:95%;
      min-width: 95%; 
  }
  </code></pre>