Crezzur
Reputation: 1481
Hide or show options menu depending on the choice in option menu 1 or 2
I have a setup of three select option's. Two option menu's are shown, the third will be displayed when you pick a value in option menu NIV 2.
The way i need it to work is when you select a value in the first option menu NIV 1 it will change the second option menu NIV 2 with the matching option menu. When you select an value in option menu NIV 2 a third option menu will be displayed NIV 3.
Clarification for NIV 1, 2 and 3:
With my current code i can select any value in option menu NIV 1, Option menu NIV 2 will be changed accordingly what i select in option menu NIV 1.
The issue: When i select a value in option menu NIV 2 option menu NIV 3 will be displayed correctly. However for some reason option menu NIV 2 disappears. I am unable to find the issue at this moment.
My current code & Live Example:
$('.selectdata').change(function() {
var role = $(this).val();
switchRole(role);
});
function switchRole(role) {
var sel = $('select[data-role= ' + role + ' ]');
sel.show();
hideSelects(role, sel)
};
hideSelects = function(role, selected) {
var elements = $("select").filter(function() {
return $(this).data("role") !== undefined;
});
var toHide = $(elements).not(selected);
toHide.hide();
};<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card mt-3">
<div class="card-body">
<div class="form-group row">
<label class="col-md-1 m-t-15">Select option:</label>
<!-- OPTIE 1 -->
<div class="col-md-1" style="max-width: 150px;">
<select class="selectdata form-control custom-select" style="width: 100%; height:36px;">
<optgroup label="Select option NIV 1">
<option value="A1">NIV1 A</option>
<option value="A2">NIV1 B</option>
<option value="A3">NIV1 C</option>
</optgroup>
</select>
</div>
<!-- OPTIE 2 -->
<div class="col-md-1" style="max-width: 150px;">
<select data-role="A1" class="selectdata form-control custom-select" style="width: 100%; height:36px;">
<optgroup label="Select option NIV 2">
<option value="B11">A 11</option>
<option value="B12">A 12</option>
<option value="B13">A 13</option>
</optgroup>
</select>
<select data-role="A2" class="selectdata form-control custom-select" style="width: 100%; height:36px; display: none;">
<optgroup label="Select option NIV 2">
<option value="B21">A 21</option>
<option value="B22">A 22</option>
<option value="B23">A 23</option>
</optgroup>
</select>
<select data-role="A3" class="selectdata form-control custom-select" style="width: 100%; height:36px; display: none;">
<optgroup label="Select option NIV 2">
<option value="B31">A 31</option>
<option value="B32">A 32</option>
<option value="B33">A 33</option>
</optgroup>
</select>
</div>
<!-- OPTIE 3 -->
<div class="col-md-1" style="max-width: 150px;">
<select data-role="B11" class="form-control custom-select" style="width: 100%; height:36px; display: none;">
<optgroup label="OPTION NIV 3">
<option value="1">NIV3 A1 - 1</option>
<option value="2">NIV3 A1 - 2</option>
<option value="3">NIV3 A1 - 3</option>
</optgroup>
</select>
<select data-role="B12" class="form-control custom-select" style="width: 100%; height:36px; display: none;">
<optgroup label="OPTION NIV 3">
<option value="1">NIV3 B - 1</option>
<option value="2">NIV3 B - 2</option>
<option value="3">NIV3 B - 3</option>
</optgroup>
</select>
<select data-role="B13" class="form-control custom-select" style="width: 100%; height:36px; display: none;">
<optgroup label="OPTION NIV 3">
<option value="1">NIV3 C - 1</option>
<option value="2">NIV3 C - 2</option>
<option value="3">NIV3 C - 3</option>
</optgroup>
</select>
<select data-role="B21" class="form-control custom-select" style="width: 100%; height:36px; display: none;">
<optgroup label="OPTION NIV 3">
<option value="1">NIV3 A - 1</option>
<option value="2">NIV3 A - 2</option>
<option value="3">NIV3 A - 3</option>
</optgroup>
</select>
<select data-role="B22" class="form-control custom-select" style="width: 100%; height:36px; display: none;">
<optgroup label="OPTION NIV 3">
<option value="1">NIV3 B - 1</option>
<option value="2">NIV3 B - 2</option>
<option value="3">NIV3 B - 3</option>
</optgroup>
</select>
<select data-role="B23" class="form-control custom-select" style="width: 100%; height:36px; display: none;">
<optgroup label="OPTION NIV 3">
<option value="1">NIV3 C - 1</option>
<option value="2">NIV3 C - 2</option>
<option value="3">NIV3 C - 3</option>
</optgroup>
</select>
<select data-role="B31" class="form-control custom-select" style="width: 100%; height:36px; display: none;">
<optgroup label="OPTION NIV 3">
<option value="1">NIV3 A - 1</option>
<option value="2">NIV3 A - 2</option>
<option value="3">NIV3 A - 3</option>
</optgroup>
</select>
<select data-role="B32" class="form-control custom-select" style="width: 100%; height:36px; display: none;">
<optgroup label="OPTION NIV 3">
<option value="1">NIV3 B - 1</option>
<option value="2">NIV3 B - 2</option>
<option value="3">NIV3 B - 3</option>
</optgroup>
</select>
<select data-role="B33" class="form-control custom-select" style="width: 100%; height:36px; display: none;">
<optgroup label="OPTION NIV 3">
<option value="1">NIV3 C - 1</option>
<option value="2">NIV3 C - 2</option>
<option value="3">NIV3 C - 3</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>Upvotes: 0
Views: 44
Answers (1)
Michael Beeson
Reputation: 2875
The problem is in your hideSelects() functions. It hides all selects that aren't specifically of the value of the new select as determined by the switchRole() function.
Supposedly, you only want to hide the selects that are siblings of the current select. Luckily, jQuery makes that very easy. In the snippet below I replaced:
var elements = $("select").filter(function() {
with
var elements = $(selected).siblings().filter(function() {
And it appears to work as expected. This is assuming that it is indeed the sibling selects you want hidden, and that they will always be siblings in your html. Hope that helps!
$('.selectdata').change(function() {
var role = $(this).val();
switchRole(role);
});
function switchRole(role) {
var sel = $('select[data-role= ' + role + ' ]');
sel.show();
hideSelects(role, sel)
};
hideSelects = function(role, selected) {
var elements = $(selected).siblings().filter(function() {
return $(this).data("role") !== undefined;
});
var toHide = $(elements).not(selected);
toHide.hide();
};<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card mt-3">
<div class="card-body">
<div class="form-group row">
<label class="col-md-1 m-t-15">Select option:</label>
<!-- OPTIE 1 -->
<div class="col-md-1" style="max-width: 150px;">
<select class="selectdata form-control custom-select" style="width: 100%; height:36px;">
<optgroup label="Select option NIV 1">
<option value="A1">NIV1 A</option>
<option value="A2">NIV1 B</option>
<option value="A3">NIV1 C</option>
</optgroup>
</select>
</div>
<!-- OPTIE 2 -->
<div class="col-md-1" style="max-width: 150px;">
<select data-role="A1" class="selectdata form-control custom-select" style="width: 100%; height:36px;">
<optgroup label="Select option NIV 2">
<option value="B11">A 11</option>
<option value="B12">A 12</option>
<option value="B13">A 13</option>
</optgroup>
</select>
<select data-role="A2" class="selectdata form-control custom-select" style="width: 100%; height:36px; display: none;">
<optgroup label="Select option NIV 2">
<option value="B21">A 21</option>
<option value="B22">A 22</option>
<option value="B23">A 23</option>
</optgroup>
</select>
<select data-role="A3" class="selectdata form-control custom-select" style="width: 100%; height:36px; display: none;">
<optgroup label="Select option NIV 2">
<option value="B31">A 31</option>
<option value="B32">A 32</option>
<option value="B33">A 33</option>
</optgroup>
</select>
</div>
<!-- OPTIE 3 -->
<div class="col-md-1" style="max-width: 150px;">
<select data-role="B11" class="form-control custom-select" style="width: 100%; height:36px; display: none;">
<optgroup label="OPTION NIV 3">
<option value="1">NIV3 A1 - 1</option>
<option value="2">NIV3 A1 - 2</option>
<option value="3">NIV3 A1 - 3</option>
</optgroup>
</select>
<select data-role="B12" class="form-control custom-select" style="width: 100%; height:36px; display: none;">
<optgroup label="OPTION NIV 3">
<option value="1">NIV3 B - 1</option>
<option value="2">NIV3 B - 2</option>
<option value="3">NIV3 B - 3</option>
</optgroup>
</select>
<select data-role="B13" class="form-control custom-select" style="width: 100%; height:36px; display: none;">
<optgroup label="OPTION NIV 3">
<option value="1">NIV3 C - 1</option>
<option value="2">NIV3 C - 2</option>
<option value="3">NIV3 C - 3</option>
</optgroup>
</select>
<select data-role="B21" class="form-control custom-select" style="width: 100%; height:36px; display: none;">
<optgroup label="OPTION NIV 3">
<option value="1">NIV3 A - 1</option>
<option value="2">NIV3 A - 2</option>
<option value="3">NIV3 A - 3</option>
</optgroup>
</select>
<select data-role="B22" class="form-control custom-select" style="width: 100%; height:36px; display: none;">
<optgroup label="OPTION NIV 3">
<option value="1">NIV3 B - 1</option>
<option value="2">NIV3 B - 2</option>
<option value="3">NIV3 B - 3</option>
</optgroup>
</select>
<select data-role="B23" class="form-control custom-select" style="width: 100%; height:36px; display: none;">
<optgroup label="OPTION NIV 3">
<option value="1">NIV3 C - 1</option>
<option value="2">NIV3 C - 2</option>
<option value="3">NIV3 C - 3</option>
</optgroup>
</select>
<select data-role="B31" class="form-control custom-select" style="width: 100%; height:36px; display: none;">
<optgroup label="OPTION NIV 3">
<option value="1">NIV3 A - 1</option>
<option value="2">NIV3 A - 2</option>
<option value="3">NIV3 A - 3</option>
</optgroup>
</select>
<select data-role="B32" class="form-control custom-select" style="width: 100%; height:36px; display: none;">
<optgroup label="OPTION NIV 3">
<option value="1">NIV3 B - 1</option>
<option value="2">NIV3 B - 2</option>
<option value="3">NIV3 B - 3</option>
</optgroup>
</select>
<select data-role="B33" class="form-control custom-select" style="width: 100%; height:36px; display: none;">
<optgroup label="OPTION NIV 3">
<option value="1">NIV3 C - 1</option>
<option value="2">NIV3 C - 2</option>
<option value="3">NIV3 C - 3</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>Upvotes: 1
Related Questions
- How can I show/hide options in a select when another option is selected
- jQuery show/hide options if first one selected, shows second selected option by default
- jQuery show/hide options from one select drop down, when option on other select dropdown is slected
- How to hide\show specific value of option based on another selected option by JQuery?
- Hide or Show div based on option selection
- Hiding/Showing Drop Down menus depending on another option
- HTML. Hide/Show a drop down menu depending on if an option is selected on another drop down menu
- show/hide multiple options in jQuery
- Hide and show select option based on select option
- Show-Hide depending on select option