页面加载过滤器中与下拉列表1的数据值匹配的第二个下拉选项

Question

I have this code that I am using to filter a second drop down based on the first drop down. It works fine with the onChange method, what it does, it takes the value from the first drop down option selected, then finds and matches the options "data-value" in the second drop down to filter.

$(document).ready(function() {
  // get first dropdown and bind change event handler
  $('#p-city').change(function() {
    // get optios of second dropdown and cache it
    var $options = $('#p-nhb')
    // 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();
  });
});

I'm using it on a form and the options will be saved, so how I can run the filter on page load if something is already selected?

Answer 1

Add $('#p-city').trigger('change'); after $('#p-city').change(function() as shown in below code. This should work for sure, hope it does.i have tried the same with http://jsfiddle.net/heera/Gyaue/ jsfiddle with just selecting the first option by default and triggering the change event at end and it work

$(document).ready(function() {
    // get first dropdown and bind change event handler
    $('#p-city').change(function() {
    // get optios of second dropdown and cache it
    var $options = $('#p-nhb')
    // 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();
    })

  $('#p-city').trigger('change');

});