根據另一個選擇過濾選擇選項

Question

基本上我有兩個下拉菜單。 一個具有三個值 1,2 和 3，另一個具有 1 到 10 的值，例如，當我在第一個下拉列表中選擇 1 時，第二個下拉列表僅顯示從 1 到 4 的選項。選項是從加載到模型的數據庫中獲得的列表。

<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

            }
        }

Answer 1

基本上，這在尋找答案時對我有用，以防有人需要。 您只需要瀏覽所有選項，並且那些滿足您的條件要求的人顯示他們不顯示其他人。

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';
                    }
                }

            }
        }