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

时间:2017-10-26 05:58:03

标签: javascript jquery select drop-down-menu onchange

我使用此代码根据第一个下拉列表过滤第二个下拉列表。它适用于onChange方法,它的作用是,它从所选的第一个下拉选项中获取值,然后在第二个下拉列表中查找并匹配选项“data-value”以进行过滤。

$(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();
  });
});

我在表单上使用它并且选项将被保存,那么如果已选择某些内容,我如何在页面加载时运行过滤器?

1 个答案:

答案 0 :(得分:1)

$('#p-city').trigger('change');之后添加$('#p-city').change(function(),如下面的代码所示。这应该是肯定的,希望它确实。我已经尝试使用http://jsfiddle.net/heera/Gyaue/ jsfiddle,只是默认选择第一个选项并在结束时触发更改事件并且它可以工作

$(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');

});