как изменить второй раскрывающийся список на основе выбора первого варианта и третий раскрывающийся список на основе выбора второго варианта

Пожалуйста, может кто-нибудь помочь мне - я хочу, чтобы второе раскрывающееся меню менялось на основе выбора из первого варианта, а также третье раскрывающееся меню изменялось на основе второго выбранного параметра. Вот мой 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();
});
});

Спасибо Большое!


html jquery select option
person Opu    schedule 12.04.2018    source источник
comment
насколько я вижу в этом коде, у вас нет элемента с идентификатором jhs   -  person Lelio Faieta    schedule 12.04.2018

Ответы (3)


arrow_upward
1
arrow_downward

Я немного меняю, чтобы было легче.

Когда мы изменим первый выбор, он проверит параметр второго выбора и изменит его значение.

После этого он вызовет событие изменения второго выбора и так далее.

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

person Hikarunomemory    schedule 12.04.2018

arrow_upward
1
arrow_downward

Я понял, вы бы добавили код 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();
});
});

person Prits    schedule 12.04.2018
comment
Спасибо Урокс. Я уже добавил скрипт CDN. Но я все еще не получаю результат. - person Opu; 12.04.2018
comment
Что вы хотите, вы предоставите скриншот этого? - person Prits; 12.04.2018

arrow_upward
0
arrow_downward

Вы можете сделать это с помощью Ajax-запроса.

person Prits    schedule 12.04.2018