I need to show/hide options on one select drop down dependant on another select drop down option.
My code:
$(document).ready(function() {
$("#layout_select").select2();
$("#column_select").select2();
$("#layout_select").children('option:gt(0)').hide();
$("#column_select").change(function() {
$("#layout_select").children('option').hide();
$("#layout_select").children("option[value^=" + $(this).val() + "]").show()
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<select name="column_select" id="column_select">
<option value="col1">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>
<select name="layout_select" id="layout_select">
<option value="col1">none</option>
<option value="col2_ms">layout 1</option>
<option value="col2_sm">layout 2</option>
<option value="col3_mss">layout 3</option>
<option value="col3_ssm">layout 4</option>
<option value="col3_sms">layout 5</option>
</select>
When I change the selection of my first 'column_select', I want to change my 'layout_select' options using hide / show
Something like this StackOverflow issue
Note: I am using Select2.
In my implementation I did exactly as the example, but as I am using select2 scrpit does not work.
Does anyone know how to do the same thing, knowing that I'm using select2? Without using .remove () and .append (), but exactly as in the example giving hide / show.
$("#layout_select").select2();
again after hidding its options ?$("#layout_select").children('option').hide();
. How to calling again?