如何根据第一个选项选择更改第二个下拉列表和基于第二个选项选择的第三个下拉列表

Opu 发表于 Dev

欧普

请有人帮助我 - 我希望第二个下拉列表根据第一个选项的选择进行更改，并且第三个下拉列表根据第二个选择的选项进行更改。这是我的 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();
});
});

非常感谢！

光之记忆

我稍微改变一下以使其更容易。

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

之后，它会触发第二个选择的更改事件等等。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。