Question

我正在尝试按其他选择框person中选择的数据属性过滤选择框invoice_project_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>

使用Javascript：

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

我还构建了一个fiddle。

问题是它无法在Safari和Chrome中运行。我是jQuery的新手，基本上是复制＆amp;将代码粘贴在一起。

有人可以告诉我如何让它发挥作用吗？

感谢您的帮助。

Answer 1

隐藏选项不是跨浏览器兼容的，因此克隆选项是尝试

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

演示：Fiddle

如何按数据属性过滤选择框？

1 个答案: