Question

我正在尝试根据在另一个选择框person中选择的值来过滤选择框invoice_project_id中的选项：

<select id="invoice_project_id">
  <option value="1">Project A</option>
  <option value="2">Project B</option>
  <option value="3">Project C</option>
</select>

<select id="person">
  <option data-project_ids="[1,2]">Spencer, Eve</option>
  <option data-project_ids="[3]">Goodwin, Alisha</option>
  <option data-project_ids="[]">Emard, Tito</option>
  <option data-project_ids="[2,3]">Bergstrom, Damien</option>
</select>

这是我到目前为止所获得的jQuery：

function filterOption(id) {
  return $('#person option').filter(function () {
    return $.inArray(id, $(this).data('project_ids')) > -1
  });
}

$('#invoice_project_id').on('change', function() {
  var project = $('#invoice_project_id :selected').val();   
  var options = filterOption(parseInt(project));
  if (options) {
    return $('#person').html(options);
  } else {
    return $('#person').empty();
  }
});

函数filterOption()由someone在此论坛上提供，但由于我缺乏jQuery的经验，无法将其集成到我的代码中。

有人可以帮忙吗？

非常感谢。

Answer 1

由于filterOption函数返回一个jQuery集合，您可以隐藏选项并在返回的集合上调用.show()：

$('#invoice_project_id').on('change', function() {
   var project = $('#invoice_project_id').val(); 
   $('#person option').hide();
   filterOption(+project).show();
});

http://jsfiddle.net/M3Xga/

请注意，并非所有浏览器都会处理显示/隐藏option元素的问题。或者，您可以通过修改disabled属性来禁用/启用选项：

$('#person option').prop('disabled', true);
filterOption(+project).prop('disabled', false)
                      .first()
                      .prop('selected', true);

http://jsfiddle.net/PjHc6/1/

如何使用jQuery过滤选择选项？

1 个答案: