Filter DDL based on selection of other DDL

Question

If I have a dropdownlist that looks like this:

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

And another dropdownlist that looks like this:

<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>

Now, based on the selection of the first dropdownlist, I want the second dropdownlist to be filtered.

So if I select Option1 in the first dropdownlist.. then the second dropdownlist should show only the options under <optgroup label="Option1">

I have this so far:

$(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
        }

    });
});

Any help is appreciated.

Or http://stackoverflow.com/q/9275026/656243 – Lynn Crumbling Jan 23 '17 at 16:12 — Lynn Crumbling, Jan 23 '17 at 16:12

score 1 · Answer 1 · answered Jan 23 '17 at 16:14

You can populate the second dropdown dynamically. Example: ...

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"));
}

...

Tyler Roper · Answer 2 · 2017-01-23T16:22:37.460

You can hide all the option groups, and conditionally show only the option group that's been selected from the first dropdown.

Using a hard-coded case statement:

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

    });
});

Using an attribute for dynamic hiding/showing:

Personally, I don't like hard-coding things when I don't have to. I'd add an attribute to the option groups so that the hiding/showing can be done dynamically.

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

Notice the added data-optgroupval, whose value matches the related option from the first dropdown.

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

    });
});

I have the first option you answerd, but my 2nd dropdownlist is not filtering.. — Grizzly, Jan 23 '17 at 17:07
Do your values in the first dropdown match the values in the `case` statements? And note, it's hiding the options based on `label`, so if your labels are not `Option1`, `Option2`, etc, you will need to edit the `filter("[label='Option1']")` portions of the case statements as well. — Tyler Roper, Jan 23 '17 at 21:08

Filter DDL based on selection of other DDL

2 Answers2