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

Question

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

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

换句话说，如果用户选择＆＃34; Astronomy＆＃34;左边的主题，我希望蓝色选择器填充类名称，如＆＃34; Stars＆＃34;，＆＃34; Planets＆＃34;，＆＃34; Moons＆＃34;。

以下是我的选择选择器的设置方式：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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