1

python/jquery/ajax でカスケード ドロップダウンをセットアップしようとしています。

最初のドロップダウンは、html コードで手動で設定されます。

2 番目と 3 番目のドロップダウンは、前の選択内容に依存します。

最初のドロップダウンを選択すると、ajax 呼び出しを介して 2 番目のドロップダウンにデータを入力できます。問題は 2 番目の - です。3 番目のドロップダウン。

クライアントからの電話はまったくありません。firebugが正しい出力を提供するため、htmlコードの生成レートは正しいようです。すでにロードされているjqueryで新しい動的コンテンツを使用できるようにするために、クライアントが更新されていないと考えています。

2番目のPythonコードを追加していません->ドロップダウン呼び出しはクライアントを離れることさえないので、これは問題ではないと思います。

ただし、必要に応じて追加します。

私は例を探して探しましたが、同様の結果がいくつか見られましたが、実りのあるものはありませんでした

どんな助けでも感謝します。

jquery:

$(document).ready(function(){

        $(".dynamic-select").change(function(){
            var url_params = '?' + $(this).attr('name') + '=' + $(this).val() + '&sid=' + $(this).attr('id');
            $.getJSON('ajax' + url_params,function(data) {

                $("#"+ data.element_id).replaceWith(data.data);




    });

        });
    });

HTML スニペット

            <select class="dynamic-select" id="test1" name="test1">
                <option value="#">Select</option>
                <option value="EU">Europe</option>
                <option value="NA">North America</option>
                <option value="AS">Asia</option>
            </select>


            <select class="dynamic-select" id="test2" name="test2">
                <option value="#">Select First Dropdown</option>
            </select>

            <select class="dynamic-select" id="test3" name="test3">
                <option value="#">Select Second Dropdown</option>
            </select>

最初のドロップダウンから EU を選択した後の firebug html 出力

<select id="test1" class="dynamic-select" name="test1">
<option value="#">Select</option>
<option value="EU">Europe</option>
<option value="NA">North America</option>
<option value="AS">Asia</option>
</select>
<select id="test2" class="dynamic-select" name="test2">
<option value="#">Select EU</option>
<option value="EU_EQ_JA">EU_EQ_JA</option>
<option value="EU_CR_AR">EU_CR_AR</option>
<option value="EU_EQ_MC">EU_EQ_MC</option>
<option value="EU_EQ_CS">EU_EQ_CS</option>
<option value="EU_EQ_CR">EU_EQ_CR</option>
<option value="EU_CR_GS">EU_CR_GS</option>
</select>
<select id="test3" class="dynamic-select" name="test3">
<option value="#">Select Second Dropdown</option>
</select>
4

1 に答える 1

0

だから私はあなたの問題がにあると信じています$(".dynamic-select").change()。これは、bind や JQuery の他のいくつかのイベント トリガーと同様に、各要素が追加されるたびに再度設定する必要があります。

使用する場合

$("body").on('change','.dynamic-select',function(e){//some stuff here});

代わりに、DOM に挿入されたすべての要素に対して機能するはずです。

于 2012-07-28T18:12:03.023 に答える