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

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

您可以通过 Ajax 请求执行此操作。

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

我稍微改变一下，让它更容易。

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

之后会触发第二个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>

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

how to change second drop-down based on first option selection and third drop-down based on second option selection

jquery

html

select

option