Jquery实现二级下拉选择框

<select id="firstSelect">
  <option value="">请选择</option>
  <option value="category1">类别1</option>
  <option value="category2">类别2</option>
</select>

<select id="secondSelect">
  <option value="">请先选择上级选项</option>
</select>

$(document).ready(function() {
  var options = {
    'category1': ['选项1', '选项2'],
    'category2': ['选项3', '选项4']
  };

  $('#firstSelect').change(function() {
    var selectedCategory = $(this).val();
    var secondSelect = $('#secondSelect');

    if (selectedCategory) {
      var subOptions = options[selectedCategory];
      var newOptionsHtml = subOptions.map(function(option) {
        return '<option>' + option + '</option>';
      }).join('');

      secondSelect.html(newOptionsHtml);
    } else {
      secondSelect.html('<option value="">请先选择上级选项</option>');
    }
  }).change(); // 触发一次change事件以防初始选择
});