title: Stop dropdown width from expanding
body: <p>I have two dynamic dropdown lists. The options displayed on the second dropdown depends on what was selected in the first dropdown. The first dropdown has 2 options. If the second option is selected, the values that appear on the second dropdown in response are very long strings (url to be exact). Is there any way that i can stop the width of the dropdown from expanding?</p>
  
  <p>Here's the JSFiddle result:
  <a href="http://jsfiddle.net/pgbw56vb/10/embedded/result/" rel="nofollow">http://jsfiddle.net/pgbw56vb/10/embedded/result/</a> </p>
  
  <p><a href="http://jsfiddle.net/pgbw56vb/10/" rel="nofollow">http://jsfiddle.net/pgbw56vb/10/</a></p>
  
  <pre><code>&lt;select id="kategorie_oder_seite"&gt;&lt;/select&gt;
  
  &lt;select id="auswahl"&gt;&lt;/select&gt;
  
  
  var data = {
  "Kategorie": ["Kraft", "Startseite", "Insurance", "Risk",],
  "Seite": ["http://jsfiddle.net/tony089/pgbw56vb/2/", "https://stackoverflow.com/users/login?returnurl=%2fquestions%2fask"],
  };
  
  
  var $kategorien = $("#kategorie_oder_seite").on("change", function() {
  var seiten = $.map(data[this.value], function(seite) {
      return $("&lt;option /&gt;").text(seite);
  });
  $("#auswahl").empty().append(seiten);
  });
  
  for (var kategorie in data) {
  $("&lt;option /&gt;").text(kategorie).appendTo($kategorien);
  }
  
  $kategorien.change();
  </code></pre>
  
  <p>Thanks in advance.</p>