Home/ Questions/Q 8293539
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T13:51:45+00:00

I have two select boxes. The first is a list of the optgroups of

  • 0

I have two select boxes. The first is a list of the optgroups of the second. Both are needed for my query, but I would like to filter the second select to ONLY show the region optgroup and it’s campuses when it’s selected from the first.

Here is my code:

<html>
<body>
<select name="region">
    <option value="%">All</option>
    <option value="A">Northwest</option>
    <option value="B">North Central</option>
</select>
<select name="campus">
    <option value="%">All</option>
    <optgroup label="Northwest">
        <option value="1">Gary</option>
        <option value="2">Valparaiso</option>
        <option value="3">East Chicago</option>
    </optgroup>
    <optgroup label="North Central">
        <option value="4">South Bend</option>
        <option value="5">Elkhart</option>
        <option value="6">Warsaw</option>
    </optgroup>
</select>
</body>
</html>

So if someone selects Northwest from the first one, I want to use jQuery to filter down the second one so it now looks like so:

<select name="campus">
    <optgroup label="Northwest">
        <option value="1">Gary</option>
        <option value="2">Valparaiso</option>
        <option value="3">East Chicago</option>
    </optgroup>
</select>

Not even sure if this is possible and this is my first attempt at jQuery so I am lost. Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try to .hide() the other <optgroup>s, and .show() the one(s) you want.

    Something like this:

    $('select[name="region"]').change(function() {
    var $sel = $('select[name="campus"]'),
        val = $(this).val(),
        campus = $('option:selected', this).text();
    if (val === '%') {
        $('option,optgroup', $sel).show();
    }
    else {
        $('optgroup, optgroup > option', $sel).hide();
        $('optgroup[label="' + campus + '"]', $sel).children().andSelf().show();
    }
});​

    You can’t just hide the <optgroup>, you need to hide its children <option>s too.

    DEMO: http://jsfiddle.net/rffwW/

    EDIT: Seems that doesn’t work in IE (and apparently Safari). Another answer suggested wrapping the <option>s in <span>s, let’s try that:

    $('select[name="region"]').change(function() {
    var $sel = $('select[name="campus"]'),
        val = $(this).val(),
        campus = $('option:selected', this).text();
    $('span > optgroup', $sel).unwrap();
    if (val !== '%') {
        $('optgroup:not([label="' + campus + '"])', $sel).wrap('<span/>');
    }
});​

    DEMO: http://jsfiddle.net/rffwW/1/

    • 0