Basically I have two dropdowns. One that has three values 1,2 and 3 and another that has values from 1 to 10, and what I want is for example when I select 1 on the first dropdown, the second dropdown only shows options from 1 to 4. The options are a list obtained from the database loaded into a model.
<tr class="Values">
<td style="padding-left:70px">
@s.FieldFor(m => m.Values).Setup(false, false, false, false, false).AsDropDown().Attr("onchange", "HideSubValues()")
</td>
</tr>
<tr class="subvalues">
<td style="padding-left:70px">
@s.FieldFor(m => m.SubValuesID).Setup(false, false, false, false, false).AsDropDown()
</td>
</tr>
function HideSubValues() {
if ($("#t1_ValuesID").val() == "1" ||
$("#_ValuesID").val() == "1" ||
$("#t1_ValuesID").val() == "2" ||
$("#_ValuesID").val() == "2" ||
$("#t1_ValuesID").val() == "4" ||
$("#_ValuesID").val() == "4")
$(".subvalues").show();
else if ($("#t1_ValuesID").val() == "3" ||
$("#_ValuesID").val() == "3") {
$(".subvalues").hide();
$("#t1_SubValuesID").val("0");
}
if ($("#t1_ValuesID").val() == "1" ||
$("#_ValuesID").val() == "1") {
//ONLY SHOWS OPTIONS WHERE VALUE IS EQUAL TO 1,2,3,4 in the dropdown which ID is #t1_SubValuesID
} else if ($("#t1_ValuesID").val() == "2" ||
$("#_ValuesID").val() == "2") {
//ONLY SHOWS OPTIONS WHERE VALUE IS EQUAL TO 5,6,7,8 in the dropdown which ID is #t1_SubValuesID
} else if ($("#t1_ValuesID").val() == "4" ||
$("#_ValuesID").val() == "4") {
//ONLY SHOWS OPTIONS WHERE VALUE IS EQUAL TO 9,10 in the dropdown which ID is #t1_SubValuesID
}
}
Basically this worked out for me when looking for answers and in case someone needs it. You just have to go through all the options and those who meet the requirements of the condition you display them the others you don't.
function HideSubValues() {
if ($("#t1_ValuesID").val() == "1" ||
$("#_ValuesID").val() == "1") {
for (var i = 1; i < 11; i++) {
if ($("#t1_ValuesID")[0].options[i].value == 1
|| $("#t1_ValuesID")[0].options[i].value == 2
|| $("#t1_ValuesID")[0].options[i].value == 3
|| $("#t1_ValuesID")[0].options[i].value == 4) {
$("#t1_ValuesID")[0].options[i].style.display = 'list-item';
} else {
$("#t1_ValuesID")[0].options[i].style.display = 'none';
}
}
} else if ($("#t1_ValuesID").val() == "2" ||
$("#_ValuesID").val() == "2") {
for (var i = 1; i < 11; i++) {
if ($("#t1_ValuesID")[0].options[i].value == 5
|| $("#t1_ValuesID")[0].options[i].value == 6
|| $("#t1_ValuesID")[0].options[i].value == 7
|| $("#t1_ValuesID")[0].options[i].value == 8) {
$("#t1_ValuesID")[0].options[i].style.display = 'list-item';
} else {
$("#t1_ValuesID")[0].options[i].style.display = 'none';
}
}
} else if ($("#t1_ValuesID").val() == "3" ||
$("#_ValuesID").val() == "3") {
for (var i = 1; i < 11; i++) {
if ($("#t1_ValuesID")[0].options[i].value == 9
|| $("#t1_ValuesID")[0].options[i].value == 10) {
$("#t1_ValuesID")[0].options[i].style.display = 'list-item';
} else {
$("#t1_ValuesID")[0].options[i].style.display = 'none';
}
}
}
}