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

Question

我有这段代码，我用它来根据第一个下拉列表过滤第二个下拉列表。它与 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();
  });
});

我在表单上使用它并且选项将被保存，所以如果已经选择了某些内容，我如何运行页面加载过滤器？

Answer 1

在$('#p-city').change(function()之后添加$('#p-city').trigger('change');，如下代码所示。这应该肯定有效，希望它 does.i 已经尝试过与 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');

});

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

On page load filter second dropdown options that match data value of dropdown 1

javascript

jquery

select

onchange

drop-down-menu