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

Question

我有一个 html/css Bootstrap 界面，如下所示:

当用户从左侧的灰色选择器中选择一个选项时，我希望右侧的蓝色选择器填充一组相应的 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

将更改事件处理程序添加到蓝色选择输入。当它发生变化时，它将清空灰色选择，然后向其中添加每个新选项:

$('.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>');
  })
});