如何使用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>

我怎樣才能篩選#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，因為它不在選擇上，而是在選項上。 它不能神奇地獲得所選選項的數據屬性

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的版本（無需克隆），並且僅復制適用的選項。

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

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