1 
child.attr('selectedIndex', 1);

私の場合はうまくいかないようです。

親と子の 2 つのカスケード ドロップダウン リストがあります。まず、両方に同じ値が含まれています。ユーザーが親選択ボックスからアイテムを選択すると、子選択の選択肢として削除されます。

親の選択ボックスには、デフォルトと 2 つの値の 3 つの項目しかない場合があります。この場合、ユーザーが親の値を選択すると、子の選択で可能な唯一の選択肢は、残りの非デフォルト値です。

したがって、親に値が 2 つしかない場合、ユーザーが親が選択したものを選択したときに、子ボックスに残っているデフォルト以外の値を自動的に選択したいと思います。

私が始める HTML は次のようになります。

<select name="from" class="from">
<option value="" selected="selected" class="default">Select a value</option>
<option value="na">One</option>
<option value="ja">Two</option>
</select>
<select name="to" class="to">
<option value="" selected="selected" class="default">Select a value</option>
<option value="na">One</option>
<option value="ja">Two</option>
</select>

次に、ユーザーが親で「1」を選択すると、子の選択では自動的に「2」が選択されます。

親の値が選択されたときに子から値を削除するために使用するjQueryは次のとおりです。

    (function ($) {
        function cascadeSelect(parent, child) {
            var childOptions = child.find('option:not(.default)');
            child.data('options', childOptions);
            parent.change(function () {
                childOptions.remove();
                child.append(child.data('options').filter('.' + this.value))
                    .change();
                if (child.data('options').length == 2) {
                    [select the last option here]
                }

            })

            if (parent.val()) {
                childOptions.not('.default, .' + parent.val()).remove();
            }

        }


        $(function () {
            cascadeForm = $('.askform');
            pulldown_from = cascadeForm.find('.from');
            pulldown_to = cascadeForm.find('.to');

            cascadeSelect(pulldown_from, pulldown_to);
        });

子選択に 2 つのオプションしかないかどうかを確認する行を追加しました。

                if (child.data('options').length == 2) {
                    [select the non-default child option here]
                }

しかし、デフォルト以外の子オプションを選択する方法がわかりません。私は.selectedIndexを使用してそれを行うことができると思いました:

child.attr('selectedIndex', 1);

しかし、これは元のインデックス値を参照しているようです (親で選択した値を削除する前のインデックス)。

親で開始するオプションが2つしかない場合、子選択でデフォルト以外のオプションのみを自動的に選択するにはどうすればよいですか?

4

3 に答える 3

1

いくつかの問題が見つかったと思います。

この行で：

child.append(child.data('options').filter('.' + this.value))
             .change();

クラス（値ではなく）のセレクターを使用してフィルタリングしようとしているようです。オプションの値に基づいてフィルタリングするようにセレクターを変更することで、これを修正できるはずです。

child.append(child.data('options').filter('[value="' + this.value + '"]'))
             .change();

ドロップダウンで値を選択する最も簡単な方法は、 を使用することval()です。つまり、次の行を読む必要があります。

child.val(this.value);

全体の動作を確認したい場合は、JS Fiddle を作成しました: http://jsfiddle.net/KkNHr/1/

于 2012-12-17T07:44:46.297 に答える
0

これは機能しているように見えます...しかし、attrを使用しないのはなぜですか?

child.get(0).selectedIndex = 1;
于 2012-12-17T07:43:26.877 に答える
0

参照用に参照してください: http://jsfiddle.net/YqGU8/

$(".from").change(function() {
 var val = $(this).find(":selected").val();
 $(".to option[value='" + val + "']").remove();
 $(".to option:last").attr('selected','selected');
});​
于 2012-12-17T07:43:47.747 に答える