javascript - 如何使用 jQuery 过滤/克隆选择框选项？

Question

我有以下两个选择框:

<select id="project">
  <option data-person_ids="[75,76,77]">None</option>
  <option data-person_ids="[77]">Project A</option>
  <option data-person_ids="[75,76]">Project B</option>
  <option data-person_ids="[75]">Project C</option>
</select>

<select id="person">
  <option value="75">Person A</option>
  <option value="76">Person B</option>
  <option value="77">Person C</option>
</select>

如何根据 #project 中选择的值过滤 #person 选项？

这是一个同事提出的 jQuery 代码片段，但我无法让它工作，因为我对 jQuery 还很陌生:

$(function() {

  var $person = $('#person');

  $allPersonOptions = $person.children();

  $('#project').on('change', function() {
    var selected_project = $('#project').data('person_ids');
    filterOptions($allPersonOptions.clone(), +selected_project).appendTo($person.empty());
  });

});

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

感谢您在此事上的任何帮助。

Answer 1

好吧，你的同事给了你错误的代码。

第一

var selected_project = $('#project').data('person_ids');

将返回未定义，因为它不在选择上，而是在选项上。它不会神奇地获取所选选项的数据属性

var selected_project = $('#project option:selected').data('person_ids');

接下来代码中有一个随机的+

filterOptions($allPersonOptions.clone(), +selected_project).appendTo($person.empty());
                                        ^^^

这将进行转换，糟糕。

接下来过滤器代码正在寻找数据属性

return $.inArray(id, $(this).data('project_ids')) > -1

该选择的选项没有数据属性。并且参数也发生了变化。

$(function() {

  var $person = $('#person');

  $allPersonOptions = $person.children();

  $('#project').on('change', function() {
    var selected_project = $('#project option:selected').data('person_ids');
    filterOptions($allPersonOptions.clone(), selected_project).appendTo($person.empty());
  });

});

function filterOptions($options, id) {
  return $options.filter(function() {
    return $.inArray(parseInt(this.value,10), id) > -1
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="project">
  <option data-person_ids="[75,76,77]">None</option>
  <option data-person_ids="[77]">Project A</option>
  <option data-person_ids="[75,76]">Project B</option>
  <option data-person_ids="[75]">Project C</option>
</select>

<select id="person">
  <option value="75">Person A</option>
  <option value="76">Person B</option>
  <option value="77">Person C</option>
</select>