根据另一个 select 筛选 Select 个选项

Question

基本上我有两个下拉菜单。一个具有三个值 1,2 和 3，另一个具有从 1 到 10 的值，我想要的是例如当我在第一个下拉列表中 select 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';
                    }
                }

            }
        }

根据另一个 select 筛选 Select 个选项

Filter Select Options based on another select

javascript

c#

html

.net