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

Question

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

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