jquery - 如何根据jquery对象过滤选择框

Question

我有一个选择框，其中包含如下选项列表，

<select id="select_docs_type">
     <option selected="selected" value="All">All</option>
     <option value="BL">Bill of Lading</option>
     <option value="CCORR">Correspondence</option>
     <option value="CDELR">Consigneee</option>
     <option value="CINV">Invoice</option>
     <option value="CLAIM">Claim</option>
     <option value="CLCLTR">Closed Letter</option>
     <option value="CLMNTE">Claim Notes</option>
   </select>

这是我的 JSON 对象响应，

"document": [{
    "docType": "CINV",
    "format": "png",
}, {
    "docType": "CLAIM",
    "format": "msw12",
}, {
    "docType": "CLAIM",
    "format": "msw12",      
}],

所以在这里我只想保留那些与响应“docType”具有相同值的选项，其余的应该被删除。

请帮我解决这个问题。提前致谢!

Answer 1

您可以使用.filter()使用 Array.prototype.some() 测试 "document" 对象中是否存在 options 值.

Reduce the set of matched elements to those that match the selector or pass the function's test.

$('#select_docs_type option:gt(0)').filter(function() {
    var optionValue = $(this).val();
    return documentTypes.some(function(d) {
        return d.docType == optionValue
    }) == false;
}).remove();

var documentTypes = [{
  "docType": "CINV",
  "format": "png",
}, {
  "docType": "CLAIM",
  "format": "msw12",
}, {
  "docType": "CLAIM",
  "format": "msw12",
}];

$('#select_docs_type option:gt(0)').filter(function() {
  var optionValue = $(this).val();
  return documentTypes.some(function(d) {
    return d.docType == optionValue
  }) == false;
}).remove()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select_docs_type">
  <option selected="selected" value="All">All</option>
  <option value="BL">Bill of Lading</option>
  <option value="CCORR">Correspondence</option>
  <option value="CDELR">Consigneee</option>
  <option value="CINV">Invoice</option>
  <option value="CLAIM">Claim</option>
  <option value="CLCLTR">Closed Letter</option>
  <option value="CLMNTE">Claim Notes</option>
</select>