2

2つの選択ボックスがあります。1つ目は、2つ目のオプトグループのリストです。クエリには両方が必要ですが、2番目の選択をフィルタリングして、最初の選択から選択されたときにリージョン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を使用して2番目のものをフィルタリングし、次のようになります。

<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>の s と、必要な sを試してください.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>ます。

デモ: http://jsfiddle.net/rffwW/

編集：IE（および明らかにSafari）では機能しないようです。 別の答え<option>は、 s を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 に答える