0

3つのドロップダウンリストを使用して3つの設定を選択するように求められたときに、現在のドロップダウンリストには、以前に選択されていない共通メニューのオプションのみが含まれるように、共通メニューを持つjqueryで複数のドロップダウンリストを設計するにはどうすればよいですか?

例:
[ドロップ ダウン リスト 1].................[ドロップ ダウン リスト 2]........[ドロップ ダウン リスト 3]
agra :選択済み......................デリー.................................... ……マトゥラ
デリー …………マトゥラ …… ................... デリー: マトゥラを選択
............ ....アラハバード:選択された
アラハバード

4

1 に答える 1

2

それが複数選択リストの目的ですが、本当に 3 つの個別のドロップダウンが必要な場合は、次のようなものを用意しました。

var $one = $("#one"),
    $two = $("#two"),
    $three = $("#three"),
    $options = $one.children().clone();

$one.change(function() {
    var oneVal = $one.val(),
        twoVal = $two.val();
    $two.empty()
        .append($options.clone().filter(function(){
                                  return this.value != oneVal; }))
        .children().filter(function(){ return this.value == twoVal; })
        .prop("selected",true);
    $two.change();
});

$two.change(function() {
    var oneVal = $one.val(),
        twoVal = $two.val(),
        threeVal = $three.val();
    $three.empty();
    if (twoVal === "")
        return;        
    $three.append($options.clone().filter(function() {
            return this.value != twoVal && this.value != oneVal;
        }))
        .children().filter(function(){ return this.value == threeVal; })
        .prop("selected",true);
});

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

これは、私のデモと同様の html があること、つまり、最初のドロップダウンで定義された利用可能なオプションがあることを前提としています。

一部のブラウザーでは、CSS を使用してオプション要素を非表示にできません。そのため、最初のドロップダウンで選択が変更されたときに、2 番目と 3 番目のオプションを削除し、異なるものだけを元に戻すというアプローチをとっています。 . 2 番目と 3 番目に以前の選択があった場合、それがまだ利用可能であればそれを復元します。

于 2012-07-23T06:31:43.747 に答える