如何使用jQuery過濾選擇選項？

Question

我試圖基於另一個選擇框invoice_project_id中選擇的值來過濾一個選擇框person內的選項：

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

這是到目前為止的jQuery：

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 :selected').val();   
  var options = filterOption(parseInt(project));
  if (options) {
    return $('#person').html(options);
  } else {
    return $('#person').empty();
  }
});

該函數filterOption()由該論壇上的某個人提供，但是由於我缺乏jQuery的經驗，因此無法將其集成到我的代碼中。

有人可以幫忙嗎？

非常感謝。

Answer 1

由於filterOption函數返回jQuery集合，因此您可以隱藏選項並在返回的集合上調用.show() ：

$('#invoice_project_id').on('change', function() {
   var project = $('#invoice_project_id').val(); 
   $('#person option').hide();
   filterOption(+project).show();
});

http://jsfiddle.net/M3Xga/

請注意，並非所有瀏覽器都處理顯示/隱藏option元素。 或者，您可以通過修改disabled屬性來禁用/啟用選項：

$('#person option').prop('disabled', true);
filterOption(+project).prop('disabled', false)
                      .first()
                      .prop('selected', true);

http://jsfiddle.net/PjHc6/1/