Question

我有两个选择框。第一个是第二个的optgroups列表。这两个都是我的查询所需要的，但是我想过滤第二个选择以仅显示区域optgroup以及从第一个选择它时的校园。

这是我的代码：

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

因此，如果有人从第一个选择Northwest，我想使用jQuery过滤第二个，所以它现在看起来像这样：

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

甚至不确定这是否可行，这是我第一次尝试jQuery，所以我迷失了。提前谢谢。

Answer 1

尝试.hide()其他<optgroup>和.show()您想要的那个。

这样的事情：

$('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();
    }
});

您不能只隐藏<optgroup>，还需要隐藏其子<option>。

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

编辑：似乎在IE中无法使用（显然是Safari）。 Another answer建议将<option>包裹在<span>中，让我们尝试一下：

$('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/

Answer 2

我在这里遇到了类似的解决方案：https://gist.github.com/robcowie/2267793

这个插件适用于选择文本而不是值：

$.fn.filterGroups = function( options ) {
    var settings = $.extend( {filterByText: true}, options);

    return this.each(function(){
        var $select = $(this);
        $select.data('fg-original-groups', $select.find('optgroup').clone()).children('optgroup').remove();

        $(settings.groupSelector).change(function(){
            var $this = $(this);

            var optgroup_label = $.trim($this.val().toUpperCase());
            if(settings.filterByText)
                optgroup_label = $.trim($('option:selected', $this).text());

            var $optgroup =  $select.data('fg-original-groups').filter("optgroup[label='" + optgroup_label + "']").clone();
            $select.children('optgroup').remove();
            $select.append($optgroup);
        }).change();

    });
};

要使用该插件，请添加您的选择器（我更喜欢使用ID）：

$('select[name="campus"]').filterGroups({groupSelector: 'select[name="region"]' });

optgroup上的jQuery过滤器

2 个答案: