2

我有两个选择框。第一个是第二个的 optgroup 列表。我的查询需要两者，但我想过滤第二个选择以仅显示从第一个选择的区域 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，所以我迷路了。提前致谢。

4

2 回答 2

5

尝试.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();
    }
});​

你不能只隐藏s <optgroup>，你也需要隐藏它的孩子<option>s。

演示：http: //jsfiddle.net/rffwW/

编辑：似乎在 IE 中不起作用（显然是 Safari）。 另一个答案建议将 s 包装在<option>s 中<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/>');
    }
});​

演示：http: //jsfiddle.net/rffwW/1/

于 2012-07-25T15:24:28.347 回答
1

我在这里遇到了类似的解决方案：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"]' });

于 2014-03-13T15:07:15.183 回答