I have two selection dropdown. User have to select the category first, than the sub category option will be displayed based on the first selection.
If user pick category with value 3 it will display the sub category with option value of 1, 2 , 3. Option value of 0 will be hide/ remove in the sub category.
And if user pick category with option 0||1||2 it will only display other in the sub category option.
How do I achieve this. Do I have to use hide function to hide the value ?
$('#category').change(function() {
let cat = $(this).val();
if (cat === '0' || cat === '1' || cat === '2') {
console.log("other");
$("#sub_category").change(function() {
$('#sub_category').children('option[value="1"]').hide();
$('#sub_category').children('option[value="2"]').hide();
$('#sub_category').children('option[value="3"]').hide();
});
} else {
$("#sub_category").change(function() {
$('#sub_category').children('option[value="0"]').hide();
})
console.log(cat);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="category" id="category">
<option value="0">Type A</option>
<option value="1">Type B</option>
<option value="2">Type C</option>
</select>
<select name="sub_category" id="sub_category">
<option value="" hidden>Select Sub Category</option>
<option value="0">Other</option>
<option value="1">Op1</option>
<option value="2">Op2</option>
<option value="3">Op3</option>
</select>This is what I have tried but its not working
I will get #category value and run for each option to show/hide depending on cat value.
You can use the below demo:
$('#category').change(function() {
$("#sub_category").val('');
let cat = $(this).val();
$("#sub_category option").show();
if (cat == 3) {
$("#sub_category option").each(function (index, item) {
var value = parseInt($(item).val());
if ([0].includes(value)) {
$(item).hide();
}
});
} else {
$("#sub_category option").each(function (index, item) {
var value = parseInt($(item).val());
if ([1, 2, 3].includes(value)) {
$(item).hide();
}
});
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="category" id="category">
<option value="0">Type A</option>
<option value="1">Type B</option>
<option value="2">Type C</option>
<option value="3">Value 3</option>
</select>
<select name="sub_category" id="sub_category">
<option value="">Select Sub Category</option>
<option value="0">Other</option>
<option value="1">Op1</option>
<option value="2">Op2</option>
<option value="3">Op3</option>
</select>Your JS code must look like this.
$('#category').change(function(e) {
let cat = e.currentTarget.value;
if (cat === '0' || cat === '1' || cat === '2') {
$('#sub_category').children('option[value="0"]').show();
$('#sub_category').children('option[value="1"]').hide();
$('#sub_category').children('option[value="2"]').hide();
$('#sub_category').children('option[value="3"]').hide();
} else {
$('#sub_category').children('option[value="1"]').show();
$('#sub_category').children('option[value="2"]').show();
$('#sub_category').children('option[value="3"]').show();
$('#sub_category').children('option[value="0"]').hide();
console.log(cat);
}
});