根据另一个选择器中的值动态填充一个选择器

Question

我有一个html / css自举界面，如下所示：

当用户从左侧的灰色选择器中选择一个选项时，我希望在右侧的蓝色选择器中填充一组对应的json变量。

换句话说，如果用户选择左侧的“天文学”主题，我希望蓝色选择器中填充类名称，例如“星星”，“行星”，“月亮”。

这是我的选择器的设置方式：

  <div id="course1"> <center> <select class="selectpicker show-menu-arrow" data-style="btn-inverse" data-size="7" data-width="300px"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> var json = { "courseSubject1": "Accountancy", "courseSubject2": "American Studies", "courseSubject3": "Anatomy & Regenerative Biology", "courseSubject4": "Anesthesiology" }; $.each(json, function(key, value) { $('.selectpicker').append('<option value="' + key + '">' + json[key] + '</option>'); }) </script> </select> <select class="selectpicker" data-style="btn-primary" data-width="600px"> <option>Stars</option> <option>Planets</option> <option>Moons</option> </select> 

如何根据灰色选择器中选择的选项动态填充蓝色选择器？

Answer 1

将更改事件处理程序添加到蓝色的select输入中。 更改后，它将清空灰色选择，然后向其添加每个新选项：

$('.blue-select').on('change', function() {
  // If you want to conditionally populate your list
  // you may need to get the selected options like this:
  // $(this).find("option:selected").val()
  $('.grey-select').empty();
  $.each(json, function(key, value) {
     $('.grey-select').append('<option value="' + key + '">' + value + '</option>');
  })
});