根据其他 DDL 的选择过滤 DDL [重复]

Question

如果我有一个如下所示的下拉列表：

<select class="form-control" id="FirstDDL" name="FirstDDL">
    <option value="1">Option1</option>
    <option value="2">Option2</option>
    <option value="3">Option3</option>
</select>

还有一个如下所示的下拉列表：

<select class="form-control" id="SecondDDL" name="SecondDDL">
    <option value="">Select Option</option>
    <optgroup label="Option1">
        <option value="12">SubOption1Value1</option>
        <option value="13">SubOption1Value2</option>
        <option value="14">SubOption1Value3</option>
    </optgroup>
    <optgroup label="Option2">
        <option value="49">SubOption2Value1</option>
        <option value="50">SubOption2Value2</option>
        <option value="51">SubOption2Value3</option>
    </optgroup>
    <optgroup label="Option3">
        <option value="33">SubOption3Value1</option>
        <option value="34">SubOption3Value2</option>
        <option value="35">SubOption3Value3</option>
    </optgroup>
</select>

现在，根据第一个下拉列表的选择，我希望过滤第二个下拉列表。

所以如果我在第一个下拉列表中选择 Option1.. 那么第二个下拉列表应该只显示 <optgroup label="Option1"> 下的选项

到目前为止我有这个：

$(document).ready(function () {

    $("#FirstDDL").change(function () {
        var selectedOption = $("option:selected", this);
        var selectedText = selectedOption.val();

        switch (selectedText) {
            case 1:
                // here is where I need to set the values of the second dropdownlist
        }

    });
});

感谢任何帮助。

Answer 1

您可以动态填充第二个下拉列表。 例子： ...

switch (selectedText) {
            case 1:
                $("<option/>", { value: 12, html: "SubOption1Value1" }).appendTo($("secondDDL"));
                $("<option/>", { value: 13, html: "SubOption1Value2" }).appendTo($("secondDDL"));
                $("<option/>", { value: 14, html: "SubOption1Value3" }).appendTo($("secondDDL"));
}

...

Answer 2

您可以隐藏所有选项组，并有条件地仅显示从第一个下拉列表中选择的选项组。

使用硬编码的 case 语句：

https://jsfiddle.net/mbrj7t2b/1/

$(document).ready(function () {

    $("#FirstDDL").change(function () {
        var thisValue = $(this).val();

        var $optGroups = $("#SecondDDL optgroup");
        $optGroups.hide();

        switch (thisValue) {
            case "1":
                $optGroups.filter("[label='Option1']").show();
                break;
            case "2":
                $optGroups.filter("[label='Option2']").show();
                break;
            case "3":
                $optGroups.filter("[label='Option3']").show();
                break;
        }

    });
});

---

使用属性进行动态隐藏/显示：

就我个人而言，我不喜欢不必要的硬编码。我会向选项组添加一个属性，以便可以动态完成隐藏/显示。

https://jsfiddle.net/mbrj7t2b/2/

注意添加的data-optgroupval，其值与第一个下拉菜单中的相关选项匹配。

<select class="form-control" id="FirstDDL" name="FirstDDL">
    <option>Select Option 1</option>
    <option value="1">Option1</option>
</select>
<select class="form-control" id="SecondDDL" name="SecondDDL">
    <option value="">Select Option 2</option>
    <optgroup label="Option1" data-optgroupval="1">
        <option value="12">SubOption1Value1</option>
        <option value="13">SubOption1Value2</option>
        <option value="14">SubOption1Value3</option>
    </optgroup>
</select>

$(document).ready(function () {

    $("#FirstDDL").change(function () {
        var thisValue = $(this).val();

        var $optGroups = $("#SecondDDL optgroup");
        $optGroups.hide();

        $optGroups.filter("[data-optgroupval="+thisValue+"]").show();

    });
});