Filter second dropdown from first dropdown using Jquery

Question

Team,

I have two dropdowns saying "Years" and "Sections".

1) Years dropdown will be having options as "Show All", "1", "2", "3", "4"

2) Sections dropdown will be having options as "All Sections", "1 Section - A", "1 Section - B", "1 Section - C", "2 Section - A", "2 Section - B", "3 Section - A", "4 Section - A", "4 Section - B"

Now my question is, When I select "1" from "Years" dropdown I need to filter the options from Sections dropdown which do have "1 Section - A", "1 Section - B", "1 Section - C", if selected "2" filter should change to "2 Section - A", "2 Section - B" by hiding earlier filters. When I select "All Sections", it should display all sections.

Years 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> 

Sections Dropdown list:

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

I know that I need to use .filter but I'm not getting exact output what I need.

Hope my question is clear. Can any one please let me know how to proceed on this.

Answer 1

Bind change() event handler and filter based on the value using an additional data-* attribute.

// 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 : Or you can disable the properties using prop() method instead of hiding them.

// 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

Here is the answer

Once try it, Just copy and past it..

HTML

Years..

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

Sections

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

I hope its helpful to you...