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>
In order to show all the option which has data-search attribute with the value of selectedValue, you can try on this:
$(`#div_select option[data-search=${selectedValue}]`).show();
in the below snippet I've implemented an example of your requirement with a bit different approach.
$(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>