фильтр второй выпадающий из первого выпадающего меню с помощью Jquery

Question

Team,

У меня есть две выпадающие, говоря «Годы» и «Разделы».

1) Годы выпадающий будут иметь варианты как "Показать все", "1", "2", "3", "4"

2) Разделы выпадающий будут иметь параметры, как " «Секции», «1 раздел - А», «1 раздел -« В », А «„4 Раздел - B“

Теперь мой вопрос, когда я выбираю „1“ от„годы“выпадающего списка Мне нужно фильтровать варианты из разделов выпадающего списка, которые действительно имеют » 1 Раздел - A "," 1 Se ction - B "," 1 Section - C ", если выбрано " 2 " фильтр должен быть заменен на " 2 Section - A "," 2 Section - B ", спрятав ранее фильтры. Когда я выбираю «Все разделы», он должен отображать все разделы.

лет Dropdown:

<select required="required" class="form-control" id="div_years" name="div_years"><option value=""> Select </option><option value="0"> All Years </option><option value="4">4</option><option value="3">3</option><option value="2">2</option><option value="1">1</option></select> 

Разделы Выпадающий список:

<select required="required" class="form-control" id="div_sections" name="div_sections"><option value=""> Select </option><option value="20">1 Section - A</option><option value="21">1 Section - B</option><option value="22">1 Section - C</option><option value="24">2 Section - A</option><option value="25">2 Section - B</option><option value="28">3 Section - A</option><option value="32">4 Section - A</option><option value="33">4 Section - B</option></select> 

Я знаю, что мне нужно использовать .filter, но я не получаю точный вывод, что мне нужно.

Надеюсь, мой вопрос ясен. Может кто-нибудь, пожалуйста, дайте мне знать, как действовать дальше.

Answer 1

Bind change() обработчик событий и фильтр на основе значения с использованием дополнительного атрибута data-*.

// get first dropdown and bind change event handler 
 
$('#div_years').change(function() { 
 
    // get optios of second dropdown and cache it 
 
    var $options = $('#div_sections') 
 
    // update the dropdown value if necessary 
 
    .val('') 
 
    // get options 
 
    .find('option') 
 
    // show all of the initially 
 
    .show(); 
 
    // check current value is not 0 
 
    if (this.value != '0') 
 
    $options 
 
    // filter out options which is not corresponds to the first option 
 
    .not('[data-val="' + this.value + '"],[data-val=""]') 
 
    // hide them 
 
    .hide(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select required="required" class="form-control" id="div_years" name="div_years"> 
 
    <option value="">Select</option> 
 
    <option value="0">All Years</option> 
 
    <option value="4">4</option> 
 
    <option value="3">3</option> 
 
    <option value="2">2</option> 
 
    <option value="1">1</option> 
 
</select> 
 
<select required="required" class="form-control" id="div_sections" name="div_sections"> 
 
    <option value="">Select</option> 
 
    <option value="20" data-val="1">1 Section - A</option> 
 
    <option value="21" data-val="1">1 Section - B</option> 
 
    <option value="22" data-val="1">1 Section - C</option> 
 
    <option value="24" data-val="2">2 Section - A</option> 
 
    <option value="25" data-val="2">2 Section - B</option> 
 
    <option value="28" data-val="3">3 Section - A</option> 
 
    <option value="32" data-val="4">4 Section - A</option> 
 
    <option value="33" data-val="4">4 Section - B</option> 
 
</select>

---

UPDATE: Или вы можете отключить свойства, используя метод prop() вместо прятать их.

// get first dropdown and bind change event handler 
 
$('#div_years').change(function() { 
 
    // get optios of second dropdown and cache it 
 
    var $options = $('#div_sections') 
 
    // update the dropdown value if necessary 
 
    .val('') 
 
    // get options 
 
    .find('option') 
 
    // enable all options 
 
    .prop('disabled', false); 
 
    // check current value is not 0 
 
    if (this.value != '0') 
 
    $options 
 
    // filter out options which is not corresponds to the first option 
 
    .not('[data-val="' + this.value + '"],[data-val=""]') 
 
    // disable options  
 
    .prop('disabled', true); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select required="required" class="form-control" id="div_years" name="div_years"> 
 
    <option value="">Select</option> 
 
    <option value="0">All Years</option> 
 
    <option value="4">4</option> 
 
    <option value="3">3</option> 
 
    <option value="2">2</option> 
 
    <option value="1">1</option> 
 
</select> 
 
<select required="required" class="form-control" id="div_sections" name="div_sections"> 
 
    <option value="">Select</option> 
 
    <option value="20" data-val="1">1 Section - A</option> 
 
    <option value="21" data-val="1">1 Section - B</option> 
 
    <option value="22" data-val="1">1 Section - C</option> 
 
    <option value="24" data-val="2">2 Section - A</option> 
 
    <option value="25" data-val="2">2 Section - B</option> 
 
    <option value="28" data-val="3">3 Section - A</option> 
 
    <option value="32" data-val="4">4 Section - A</option> 
 
    <option value="33" data-val="4">4 Section - B</option> 
 
</select>

Answer 2

Вот ответ

После попробовать, просто скопировать и мимо него ..

HTML

лет ..

<select required="required" class="form-control" id="div_years"> 
    <option value=""> Select </option> 
    <option value="0"> All Years </option> 
    <option value="4">4</option> 
    <option value="3">3</option> 
    <option value="2">2</option> 
    <option value="1">1</option> 
</select> 

Разделы

<select required="required" class="form-control" id="div_sections" > 
    <option value=""> Select </option> 
    <option value="20">1 Section - A</option> 
    <option value="21">1 Section - B</option> 
    <option value="22">1 Section - C</option> 
    <option value="24">2 Section - A</option> 
    <option value="25">2 Section - B</option> 
    <option value="28">3 Section - A</option> 
    <option value="32">4 Section - A</option> 
    <option value="33">4 Section - B</option> 
</select> 

Js.

<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
<script> 
    jQuery(document).ready(function() { 
     jQuery("#div_years").change(function() { 
      var years = jQuery('#div_years').val(); 
      var select = jQuery('#div_sections'); 
      if (years == "1") 
      { 
       select.empty().append('<option value="20">1 Section - A</option><option value="21">1 Section - B</option><option value="22">1 Section - C</option>'); 
      } 
      if (years == "2") 
      { 
       select.empty().append('<option value="24">2 Section - A</option><option value="25">2 Section - B</option>'); 
      } 
      if (years == "3") 
      { 
       select.empty().append('<option value="28">3 Section - A</option>'); 
      } 
      if (years == "4") 
      { 
       select.empty().append('<option value="32">4 Section - A</option><option value="33">4 Section - B</option>'); 
      } 
      if (years == "0") 
      { 
       select.empty().append('<option value="20">1 Section - A</option><option value="21">1 Section - B</option><option value="22">1 Section - C</option><option value="24">2 Section - A</option><option value="25">2 Section - B</option><option value="28">3 Section - A</option><option value="32">4 Section - A</option><option value="33">4 Section - B</option>'); 
      } 
     }) 
    }) 

</script> 

Я надеюсь, что его полезным для вас ...