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>

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

这是一个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');

将返回undefined，因为它不在select上，它在选项上。它不会神奇地获取所选选项的数据属性

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>

Answer 2

我有一个版本可以重复使用allPersonOptions（无需克隆），只复制适用的选项。

＆＃13;

$(function() {
  var $person = $('#person');
  $allPersonOptions = $person.children();
    
  $('#project').on('change', function() {
    var ids = $('#project option:selected').data('person_ids');
    $person.empty();
    $allPersonOptions.each( function() {
      var id = parseInt($(this).attr('value'));
      if ($.inArray(id, ids) != -1 )
        $person.append(this);
    })
  });
});

＆＃13;

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

＆＃13;

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

2 个答案: