0

ユーザーがフォームを送信して、どのシステムを更新する必要があるかを示すフォームがあります。フォームでは、フォームにシステムを動的に追加できるため、一意の ID を使用できません。フォームでは、プラットフォーム (unix、hp、wintel など) を選択し、選択したプラットフォームに対応するモデルを選択する必要があります。連鎖選択を考えてください。「項目」で最初に選択されたリストが変更されると、2 番目の選択リストの値を取得するために ajax 呼び出しが行われます。対応する連鎖選択に対してのみ、「アイテム」の2番目の選択リストを更新するにはどうすればよいですか?

clone メソッドを使用して、ユーザーがフォームに項目を追加できるようにしています。そのため、ID はページ上で一意ではなくなったため、クラスを使用してどの選択ボタンが変更されたかを把握しています。現在の動作方法では、2番目の選択リストが更新されるたびに更新され、1番目の選択リストに対応する選択連鎖選択リストのみが更新されます。next() が答えだと思いますが、構文が間違っていると思います。

1 番目の選択リストのクラスはプラットフォームで、2 番目はモデルです。

2 番目の選択リストごとに更新します: $("select.model").html(options)

何も更新されません: $("select.model").next().html(options);

どんな助けでも大歓迎です。

<div id="mySelectArea">
  <select id="myFirstOption" class="myFirstOption">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
  <select id="mySecondSelect" class="mySecondSelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>    
  </select>
</div>

<div id="mySelectArea">
  <select id="myFirstOption" class="myFirstOption">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
  <select id="mySecondSelect" class="mySecondSelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>    
  </select>
</div>

<script>
jQuery(document).ready(function()
    {
    $(".myFirstOption").live("change", function() {
        $.getJSON("live_getModels.cfm",{platform: $(this).val()},       
        function(j){
            var options = '';
            for (var i = 0; i < j.length; i++) 
                {
                    options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
                }
        $(this).next("#mySecondSelect").html(options);      
        });
    });

});
</script>

以下は、より正確なデモ用のサンプル JSON 結果です。

[{"optionValue":"", "optionDisplay":"Select Model"},{"optionValue":"TBD", "optionDisplay":"TBD"},{"optionValue":"SCCM", "optionDisplay":"SCCM-standalone"},{"optionValue":"Manual", "optionDisplay":"Manual-standalone"},{"optionValue":"SCCM-VMWare", "optionDisplay":"SCCM-VMWare"},{"optionValue":"Manual-VMWare", "optionDisplay":"Manual-VMWare"},{"optionValue":"SCCM Hybrid", "optionDisplay":"SCCM Hybrid"},{"optionValue":"SCCM Hybrid VMWare", "optionDisplay":"SCCM Hybrid VMWare"},{"optionValue":"SCCM Offline", "optionDisplay":"SCCM Offline"},{"optionValue":"SCCM Offline - VMWare", "optionDisplay":"SCCM Offline - VMWare"}]
4

2 に答える 2

1

私が正しく読んでいる場合、.next() が機能しない理由は、更新するドロップダウンを選択してから次のドロップダウンに移動しているためです。あなたの（疑似）htmlがこのように見える場合

<div id="mySelectArea">
  <select id="myFirstOption">
    <option>1</option>
  </select>
  <select id="mySecondSelect">
    <option>2</option>
  </select>
</div>

そして、コードが最初に選択される変更イベントがあります

$(this).next("#mySecondSelect").options(html);

編集に基づいて、JavaScript を次のように変更します。

jQuery(document).ready(function() {
    $(".myFirstOption").live("change", function() {
        var firstOption = $(this);
        $.getJSON("live_getModels.cfm",{platform: $(this).val()},       
        function(j){
            var options = '';
            for (var i = 0; i < j.length; i++){
                options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
            }
            firstOption.next("#mySecondSelect").html(options);      
        });
    });

});

ajax 成功関数 this = window の内部では比較的確実なので、元のオブジェクトへの参照を保存する必要があります。

于 2011-03-07T19:05:44.100 に答える
0

ユーザーにすべての情報をフォームに入力させ、最後にのみリストに追加してもらいませんか？

このようにして、 n個のドロップダウンがあることを心配する必要はありません。

于 2011-03-07T18:54:37.223 に答える