Appending options to select doesn't work. Does CSS responsible for this?

I have two dropdowns. The options of the latter are dependent on the values of the first.

<div class="col-lg-6 col-md-6 col-sm-6">
  <select id="area" name="area" required>
    <option value="">Select Area</option>
    <option value="1">Area I: Vision, Mission, Goals, and Objectives</option>
    <option value="2">Area II: Faculty</option>
    <option value="3">Area III: Curriculum and Instruction</option>
    <option value="4">Area IV: Support to Students</option>
    <option value="5">Area V: Research</option>
    <option value="6">Area VI: Extension and Community Involvement</option>
    <option value="7">Area VII: Library</option>
    <option value="8">Area VIII: Physical Plant and Facilities</option>
    <option value="9">Area IX: Laboratories</option>
    <option value="10">Area X: Administration</option>
  </select>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
  <select id="parameter" name="parameter" required>
    <option value="">Select Parameter</option>
  </select>
</div>

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.

Does the CSS responsible for this?

<script type="text/javascript">
    $('#area').on('change', function(){
      console.log($('#area').val());
      $('#parameter').html('');
      var area = $('#area').val();
      if(area == ""){
        $('#parameter').append('<option value="">Select Area first</option>');
      }else{
        $.ajax({
          type: "POST",
          url: '<?php echo base_url(); ?>search/getParameters',
          data: {area: area},
          dataType: "json",
          success: function(data){
            $('#parameter').append('<option value=""></option>');
            for (var i = 0; i < data.length; i++) {
                alert(data[i])
              $('#parameter').append('<option value="' + i + '">' + data[i] + '</option>');
            }
          }
        });
      }
    });
</script>