Básicamente tengo dos menús desplegables. Uno que tiene tres valores 1,2 y 3 y otro que tiene valores del 1 al 10, y lo que quiero es por ejemplo cuando selecciono 1 en el primer desplegable, el segundo desplegable solo muestra opciones del 1 al 4. Las opciones son una lista obtenida de la base de datos cargada en un modelo.
<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 } }Básicamente, esto funcionó para mí al buscar respuestas y en caso de que alguien lo necesite. Solo tienes que pasar por todas las opciones y las que cumplen con los requisitos de la condición les muestras las demás que no.
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'; } } } }