Javascript 如何按数据属性筛选选择框？

我正试图通过在另一个选择框

发票项目\u id

中选择的数据属性来筛选选择框

人员

：

HTML:

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

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').val();
  $('#person option').hide();
  filterOption(+project).show();
});

我还建了一个

问题是它在Safari和Chrome中不起作用。我是jQuery新手，基本上是将代码复制粘贴在一起的

有人能告诉我如何使它工作吗

---

谢谢您的帮助。

隐藏选项与跨浏览器不兼容，因此请尝试克隆这些选项

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

var $person = $('#person'),
    $popts = $person.children();
$('#invoice_project_id').on('change', function () {
    var project = $('#invoice_project_id').val();
    filterOption($popts.clone(), +project).appendTo($person.empty())
}).change();

演示：