如何更改基于第一个选项选择的第二个下拉菜单和基于第二个选项选择的第三个下拉菜单

Question

请有人帮助我 - 我希望第二个下拉菜单根据第一个选项的选择进行更改，并且第三个下拉菜单根据第二个选择的选项进行更改。这是我的html：

<select name="selectLevel" id="selectLevel" >
     <option value="">-- select a level --</option>
     <option value="jhs">Junior High School</option>
     <option value="shs">Senior High School</option>
     <option value="tertiary 3">Tertiary</option>
</select>

<select name="selectSubject" id="selectSubject">
    <option value=""> -- select a subject -- </option>
    <option data-value="jhs" value="english">English Language</option>
    <option data-value="shs" value="maths">Mathematics</option>
    <option data-value="tertiary" value="IT">Business Math</option> 
</select>

<select name="selectTopic" id="selectTopic" >
    <option value=""> -- select a topic -- </option>
    <option data-value="jhs">Spelling</option>
    <option data-value="shs">Matrix</option>
    <option data-value="tertiary">Calculus</option>        
</select>

And here is my script:

 $(document).ready(function(){
   $('#jhs').change(function(){
     if($(this).data('options') == undefined){
     $(this).data('options', $('#selectSubject option').clone());
 }
 var id = $(this).val();
 var options = $(this).data('options').filter('[data-value=' + id + ']');
 $('#selectSubject').html(options).show();
});

$('#selectSubject').change(function(){
  if($(this).data('options') == undefined){
    $(this).data('options', $('#selectTopic option').clone());
 }
 var id = $(this).val();
 var options = $(this).data('options').filter('[data-value=' + id + ']');
 $('#selectTopic').html(options).show();
});
});

非常感谢！

Answer 1

我稍作改动以使其更容易。

当我们改变第一个选择时，它会检查第二个选择的选项并改变它的值。

之后会触发第二个select的change事件，以此类推。

$(document).ready(function() {

  // Save all selects' id in an array 
  // to determine which select's option and value would be changed
  // after you select an option in another select.
  var selectors = ['selectLevel', 'selectSubject', 'selectTopic']

  $('select').on('change', function() {
    var index = selectors.indexOf(this.id)
    var value = this.value

    // check if is the last one or not
    if (index < selectors.length - 1) {
      var next = $('#' + selectors[index + 1])

      // Show all the options in next select
      $(next).find('option').show()
      if (value != "") {
        // if this select's value is not empty
        // hide some of the options 
        $(next).find('option[data-value!=' + value + ']').hide()
      }
      
      // set next select's value to be the first option's value 
      // and trigger change()
      $(next).val($(next).find("option:first").val()).change()
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectLevel" id="selectLevel">
     <option value="">-- select a level --</option>
     <option value="jhs">Junior High School</option>
     <option value="shs">Senior High School</option>
     <option value="tertiary">Tertiary</option>
</select>

<select name="selectSubject" id="selectSubject">
    <option value=""> -- select a subject -- </option>
    <option data-value="jhs" value="english">English Language</option>
    <option data-value="shs" value="calculus">Calculus</option>
    <option data-value="tertiary" value="IT">Info Tech</option> 
</select>

<select name="selectTopic" id="selectTopic">
    <option value=""> -- select a topic -- </option>
    <option data-value="calculus">Calculus</option>
    <option data-value="calculus">Matrix</option>
    <option data-value="english">Basic English</option>
    <option data-value="english">Basic English 2</option>
    <option data-value="IT">Info Tech Studies</option>
    <option data-value="IT">Info Tech Studies 2</option>       
</select>

Answer 2

我知道了，你会在你的代码中添加脚本 CDN 代码 https://www.w3schools.com/jquery/jquery_get_started.asp 就在您的脚本代码上方

像这样：

<select name="selectLevel" id="selectLevel" >
 <option value="">-- select a level --</option>
 <option value="jhs">Junior High School</option>
 <option value="shs">Senior High School</option>
 <option value="tertiary 3">Tertiary</option>

<select name="selectSubject" id="selectSubject">
<option value=""> -- select a subject -- </option>
<option data-value="jhs" value="english">English Language</option>
<option data-value="shs" value="maths">Mathematics</option>
<option data-value="tertiary" value="IT">Business Math</option> 

<select name="selectTopic" id="selectTopic" >
<option value=""> -- select a topic -- </option>
<option data-value="jhs">Spelling</option>
<option data-value="shs">Matrix</option>
<option data-value="tertiary">Calculus</option>        
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('#selectLevel').change(function(){
     if($(this).data('options') == undefined){
     $(this).data('options', $('#selectSubject option').clone());
 }
 var id = $(this).val();
 var options = $(this).data('options').filter('[data-value=' + id + ']');
 $('#selectSubject').html(options).show();
});

$('#selectSubject').change(function(){
  if($(this).data('options') == undefined){
    $(this).data('options', $('#selectTopic option').clone());
 }
 var id = $(this).val();
 var options = $(this).data('options').filter('[data-value=' + id + ']');
 $('#selectTopic').html(options).show();
});
}); 

Answer 3

您可以通过 Ajax 请求来做到这一点。