Javascript 将选项附加到选择项不起作用。CSS对此负责吗？

我有两个下拉列表。后者的选项取决于前者的值

<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>

我在下面尝试了这个javascript，但问题是，即使我尝试使用alert显示值，选项也不会附加到第二个select，因为alert工作得非常好

CSS对此负责吗

<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>

---

不，不太可能，CSS与此有关。浏览器控制台会说什么，有JS错误吗？没有JS错误。事实上，我已经在不同的项目中使用了它，但是在这个项目中，我不知道为什么它不起作用。你从你的请求中得到了你期望的数据吗？是的。我还可以在js中的for循环中使用alert来显示它\