Tengo un cuadro de selección con una lista de opciones como se muestra a continuación,

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

Aquí está mi respuesta de objeto JSON,

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

Así que aquí solo quiero retener esas opciones que tienen el mismo valor que la respuesta "docType" y el resto debe eliminarse.

Por favor ayúdame con esto. ¡Gracias por adelantado!

2
Onera 28 dic. 2016 a las 10:40

3 respuestas

La mejor respuesta

Puede usar .filter() para probar si el valor options existe en {{ X2}} objeto utilizando Array.prototype.some ().

Reduzca el conjunto de elementos coincidentes a los que coinciden con el selector o pasan la prueba de la función.

$('#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>
2
Satpal 28 dic. 2016 a las 07:52
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>
0
Sojtin 28 dic. 2016 a las 07:47

Observando que no existe tal cosa como un " Objeto JSON ", y suponiendo que de una forma u otra haya analizado el JSON para obtener un objeto real, aquí hay una forma de filtrar:

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>

Si desea eliminar la opción "Todos", elimine :gt(0) del selector.

O lo mismo el mismo concepto con 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>
1
nnnnnn 28 dic. 2016 a las 07:47