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

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

使用硬编码的案例陈述：

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();

    });
});

根据其他DDL的选择过滤DDL

2 个答案: