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()来测试options对象中是否存在"document"值。

将匹配元素集合减少到与选择器匹配的元素或通过函数测试。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

注意到there's no such thing as a "JSON object"，并假设您已经解析了JSON以获得实际对象，这里有一种过滤方式：

var data = {
  "document": [{
    "docType": "CINV",
    "format": "png",
  }, {
    "docType": "CLAIM",
    "format": "msw12",
  }, {
    "docType": "CLAIM",
    "format": "msw12",      
  }]
};

var values = data.document.map(function(v) { return v.docType; });

$("select option:gt(0)").filter(function(i,el) {
  return values.indexOf(el.value) === -1;
}).remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>

如果您要删除“全部”选项，请从选择器中删除:gt(0)。

与ES6相同的概念：

var data = {
  "document": [{
    "docType": "CINV",
    "format": "png",
  }, {
    "docType": "CLAIM",
    "format": "msw12",
  }, {
    "docType": "CLAIM",
    "format": "msw12",      
  }]
};

var values = data.document.map((v) => v.docType);

$("select option:gt(0)").filter((i,el) => !values.some((v) => v===el.value)).remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>

Answer 3

var obj = {"document": [{
    "docType": "CINV",
    "format": "png",
}, {
    "docType": "CLAIM",
    "format": "msw12",
}, {
    "docType": "CLAIM",
    "format": "msw12",      
}]};



$('#select_docs_type').children().addClass('remove');
obj['document'].forEach(function(v) {
   $('#select_docs_type').find('option[value='+v.docType+']').removeClass('remove');
});

$('#select_docs_type').find('option.remove').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>

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

3 个答案: