CODEWITHSUNDEEP
jqueryjson
Onera
Onera

Reputation: 717

how to filter select box based on the jquery object

I have a select box with list of options in it as below,

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

Here is my JSON object response,

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

So here i want to just retain those options which have the value same as the response "docType" and rest should be removed.

Please help me on this. Thanks in advance!

Upvotes: 2

Views: 149

Answers (3)

Satpal
Satpal

Reputation: 133433

You can use .filter() to test whether options value exists in "document" object using Array.prototype.some().

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>

Upvotes: 2

nnnnnn
nnnnnn

Reputation: 150080

Noting that there's no such thing as a "JSON object", and assuming that one way or another you've parsed the JSON to get an actual object, here's one way to filter:

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>

If you want to remove the "All" option then remove :gt(0) from the selector.

Or the same the same concept with 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>

Upvotes: 1

Christof
Christof

Reputation: 2734

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>

Upvotes: 0

Related Questions