Display items of two dropdowns based on each other
I have two descents with the same values. I want dropdown 2 to display values based on the selection of items in dropdown 1. So the selected drop index 2 will be equal to or greater than the selected drop index 1.
document.getElementById("SELECTB").selectedIndex >= document.getElementById("SELECTA").selectedIndex
So, if B is selected in dropdown 1, then the selectable options in dropdown 2 will be B, C and D. (A will not be a selectable item)
source to share
The solution works with pure Javascript:
var select1 = document.getElementById("SELECTA");
var select2 = document.getElementById("SELECTB");
select1.onchange = function () {
while (select2.firstChild) {
select2.removeChild(select2.firstChild);
}
for (var i = select1.selectedIndex; i < select1.options.length; i++) {
var o = document.createElement("option");
o.value = select1.options[i].value;
o.text = select1.options[i].text;
select2.appendChild(o);
}
}
Ref: This is a corrected solution from javascript Change Dropdown values based on another dropdown
Update: As stated in the comment - disable options instead of removing them:
var select1 = document.getElementById("SELECTA");
var select2 = document.getElementById("SELECTB");
select1.onchange = function () {
while (select2.firstChild) {
select2.removeChild(select2.firstChild);
}
for (var i = 0; i < select1.options.length; i++) {
var o = document.createElement("option");
o.value = select1.options[i].value;
o.text = select1.options[i].text;
(i <= select1.selectedIndex)
? o.disabled = true
: o.disabled = false ;
select2.appendChild(o);
}
}
Adjusted by Fiddle
Update 2: . As in the comment, if it is possible to configure this to use class names instead of ids - yes, using getElementsByClassName()
. I adjusted both in Fiddleselect
to have class="SELECTA"
and class="SELECTB"
instead of the previously used one id
, the corresponding Javascript setting is just variable declarations:
var select1 = document.getElementsByClassName("SELECTA")[0];
var select2 = document.getElementsByClassName("SELECTB")[0];
As you already know, id
is a unique attribute, so you can get one element using getElementById()
. getElementsByClassName()
returns a collection of HTML elements even if there is only one element that has a class. So it is - in this example - the 1st item of this collection must be addressed. Since the count starts at 0, the first (and only) item to have the "SELECTA" class is getElementsByClassName("SELECTA")[0]
.
Link: https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName#Syntax
source to share
You can do it using selectedIndex with the following piece of code:
$("#SELECTA").change(function() {
var selIndex = this.selectedIndex;
$("#SELECTB").find("option").each(function(k,v) {
$(this).attr("disabled", selIndex > k);
});
});
Depending on what you need, you may need to reset #SELECTB if one of the disabled values is selected.
source to share
I think this is what you are looking for:
$("select").on("change", function (e) {
var sel = this.selectedIndex;
$("#SELECTB option").each(function (i, e) {
$(this).prop("disabled", sel > i);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="SELECTA">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select id="SELECTB">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
And it could be even more general:
$("select").on("change", function (e) {
var sel = this.selectedIndex;
var nextSelect = $(this).parent().find("select").not(this);
$(nextSelect).children().each(function (i, e) {
$(this).prop("disabled", sel > i);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="SELECTA">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select id="SELECTB">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
source to share