In my web app I have a choosen dropdown (second) which has its options with some data-attr that depend of another dropdown (first).
My requirement is, when the user selects a value on the first dropdown, the second one only show the options that have the data-attribute equal to the value that the user selected on the first drodpdown.
My question is, how to show only those options.
I have the code to hide all, and its working fine, what I can´t seem to do is to select only the options with the data-attribute selected and show the-
code to hide all options:
v_reset = function () {
$("#div_select").each(function () {
$(this).children("option").hide();
});
$('#div_select').trigger('chosen:updated');
}
js function to change the second dropdown:
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");
}
};
select 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>