En mi aplicación web, tengo un menú desplegable elegido (segundo) que tiene sus opciones con algunos atributos de datos que dependen de otro menú desplegable (primero).
Mi requisito es que, cuando el usuario selecciona un valor en el primer menú desplegable, el segundo solo muestra las opciones que tienen el atributo de datos igual al valor que el usuario seleccionó en el primer menú desplegable.
Mi pregunta es, cómo mostrar solo esas opciones.
Tengo el código para ocultar todo, y funciona bien, lo que parece que no puedo hacer es seleccionar solo las opciones con el atributo de datos seleccionado y mostrar el-
código para ocultar todas las opciones:
v_reset = function () { $("#div_select").each(function () { $(this).children("option").hide(); }); $('#div_select').trigger('chosen:updated'); }función js para cambiar el segundo menú desplegable:
v_change = function () { let selectedValue = $("[id*=firstSelect] :selected").val(); if (selectedValue > 0) { v_reset(); var optionsArray = getAllElementsWithAttribute('data-search', selectedValue); for (let i = 0; i < optionsArray.length; i++) { console.log($(this)); let value = optionsArray[i].value; //select all options with data-search attr equals to the selected value //$("#div_select option[='"+ selectedValue+ "']").show(); $('#div_select').trigger("choosen:updated"); } };seleccionar html:
<select id="div_select" class="chosen-select form-control" onchange="v_change(this)" "> <option value="-1">Selecionar opção</option> <option data-search="" value="23">JMM</option> <option data-search="" value="1037">Rota 20</option> <option data-search="" value="1572">entrega</option> <option data-search="" value="2227">29JUN19</option> <option data-search="" value="2417">teste</option> <option data-search="1" value="2450">18OUT16</option> <option data-search="10098" value="2871">18OUT16</option> <option data-search="17079" value="2917">Luis</option> <option data-search="17079" value="2918">Luis</option> <option data-search="17079" value="2940">teste tablet</option> </select>Para mostrar todas las opciones que tienen un atributo data-search con el valor de selectedValue , puede probar esto:
$(`#div_select option[data-search=${selectedValue}]`).show();en el siguiente fragmento, implementé un ejemplo de su requisito con un enfoque un poco diferente.
$(function(){ $('#source').on('change', function(){ const value = $(this).val(); const target = $('#target'); target.find('option[selected]').removeAttr('selected'); if(value =='-1'){ target.find('option').show().first().attr('selected', 'selected'); }else{ $('#target option').hide().addBack().find(`[data-search=${value}]`).show().first().attr('selected', 'selected'); } }) }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <label for="source">Source: </label> <select id="source" class="chosen-select form-control" > <option value="-1">-----</option> <option value="1">item 1</option> <option value="2">item 2</option> <option value="3">item 3</option> </select> <label for="target">Target: </label> <select id="target" class="chosen-select form-control" > <option value="-1">---</option> <option data-search="1" value="23">JMM</option> <option data-search="3" value="1037">Rota 20</option> <option data-search="2" value="1572">entrega</option> <option data-search="2" value="2227">29JUN19</option> <option data-search="3" value="2417">teste</option> <option data-search="1" value="2450">18OUT16</option> <option data-search="1" value="2871">18OUT16</option> <option data-search="3" value="2917">Luis</option> <option data-search="2" value="2918">Luis</option> <option data-search="2" value="2940">teste tablet</option> </select>