title: Appending options to select doesn't work. Does CSS responsible for this?
body: <p>I have two dropdowns. The options of the latter are dependent on the values of the first.</p>
  <pre><code>&lt;div class=&quot;col-lg-6 col-md-6 col-sm-6&quot;&gt;
    &lt;select id=&quot;area&quot; name=&quot;area&quot; required&gt;
      &lt;option value=&quot;&quot;&gt;Select Area&lt;/option&gt;
      &lt;option value=&quot;1&quot;&gt;Area I: Vision, Mission, Goals, and Objectives&lt;/option&gt;
      &lt;option value=&quot;2&quot;&gt;Area II: Faculty&lt;/option&gt;
      &lt;option value=&quot;3&quot;&gt;Area III: Curriculum and Instruction&lt;/option&gt;
      &lt;option value=&quot;4&quot;&gt;Area IV: Support to Students&lt;/option&gt;
      &lt;option value=&quot;5&quot;&gt;Area V: Research&lt;/option&gt;
      &lt;option value=&quot;6&quot;&gt;Area VI: Extension and Community Involvement&lt;/option&gt;
      &lt;option value=&quot;7&quot;&gt;Area VII: Library&lt;/option&gt;
      &lt;option value=&quot;8&quot;&gt;Area VIII: Physical Plant and Facilities&lt;/option&gt;
      &lt;option value=&quot;9&quot;&gt;Area IX: Laboratories&lt;/option&gt;
      &lt;option value=&quot;10&quot;&gt;Area X: Administration&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class=&quot;col-lg-6 col-md-6 col-sm-6&quot;&gt;
    &lt;select id=&quot;parameter&quot; name=&quot;parameter&quot; required&gt;
      &lt;option value=&quot;&quot;&gt;Select Parameter&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I tried this javascript below but the problem is the options do not append to the second select even if I tried displaying the values using alert which works perfectly fine.</p>
  <p>Does the CSS responsible for this?</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
      $('#area').on('change', function(){
        console.log($('#area').val());
        $('#parameter').html('');
        var area = $('#area').val();
        if(area == &quot;&quot;){
          $('#parameter').append('&lt;option value=&quot;&quot;&gt;Select Area first&lt;/option&gt;');
        }else{
          $.ajax({
            type: &quot;POST&quot;,
            url: '&lt;?php echo base_url(); ?&gt;search/getParameters',
            data: {area: area},
            dataType: &quot;json&quot;,
            success: function(data){
              $('#parameter').append('&lt;option value=&quot;&quot;&gt;&lt;/option&gt;');
              for (var i = 0; i &lt; data.length; i++) {
                  alert(data[i])
                $('#parameter').append('&lt;option value=&quot;' + i + '&quot;&gt;' + data[i] + '&lt;/option&gt;');
              }
            }
          });
        }
      });
  &lt;/script&gt;
  </code></pre>