7

現在の要素の後のすべての要素を削除することについて質問があります。

シナリオは次のとおりです。

特定の値に到達するためにユーザーが通り抜ける必要のあるロケーションツリーがあります。ajaxを介してトップレベルの場所をロードするSELECTがあります。選択を絞り込むためにデータの値がより細かく設定されているため、ユーザーが選択した内容に応じて新しいSELECTを追加します。ユーザーがデータで使用可能なオプションの最後に到達したら、SELECTの追加を停止し、最後のオプションの値を取得します。これが私が求めているものです。

これをコーディングする方法は、最上位のロケーションIDが組み込まれている1つのSELECTから開始し、次にデータベースに送信されてその選択のために子を取得する「onchange」イベントハンドラーを持ち、新しい現在のTD内で選択します。

これは、最後の選択で子が返されなくなるまで続きます。その時点で、この最終的な場所のIDを取得できます。

これは、ユーザーが1つまたは2つの「アップストリーム」を選択するものを変更することを決定するまではうまく機能します。

これは、ロケーションツリーを取得したユーザーが持つ可能性のあるものの図です（これらはコード内のSELECTです）。

アメリカ->オハイオ->カイヤホガ->クリーブランド->第1地区

'District 1'がこの場所のチェーンで最後に利用可能なアイテムであった場合、$（'＃locations select：last'）。val（）を使用して取得できます。ワンダーバー。

うまく機能しないのは、ユーザーが「うーん、私が求めているのはCuyahogaではなく、Stow」と判断し、3番目の選択オプションを変更した場合です。私がする必要があるのは、「Cuyahoga」を持つ選択の後にすべての選択を削除することです。これは、「Stow」のデータをさらにフェッチする必要があるためです。前の選択の後の選択は無効になります。

操作されているselectは、onchangeイベントでそれ自体を渡すため、現在の要素があります。$（elem）.after（）。remove（）を試しましたが、機能しません。

現在のSELECTの後にすべてのSELECTを削除する方法についてのアイデアはありますか？

ありがとう！

ドキュメントの構造は次のようになります。

<table border id="loctable">
  <tr><th>Location:</th><td><select id="loc0" onchange="return UpdateLocationSelect(this);">
    <option>choose..</option>
    <option value="3">USA</option>
    </select>
  </td>
  </tr>

[をちょきちょきと切る]

function UpdateLocationSelect(elem) {
    // load sub locations for PPID given. IN this case, locations under USA. add options to elem
    // Also, erase any selects after this one, in case the user has "backed up" his selection

    $(elem).next().remove();  // Help needed here!! how to remove any SELECTs after this one??

    $.ajax({
        url: "api.php",
        dataType: "json",
        data: { cmd: "sublocs", "pid": elem.value },
        async: false,
        success: function( data, textStatus ) {
            // results
            if( $(data).length ) {
                $('#loctable td').append( "<select onchange='return UpdateLocationSelect(this);'><option>choose..</option></select>");
                $.each( data, function( key, val ){
                    $('#loctable select:last').append( '<option value="'+key+'">'+val+'</option>' );
                });
            }
            else
            {
                // we've hit the end of this location branch. Alert to check val is right
                alert( "LocID: " + $('#loctable select:last').val() );
            }
        },
      });
      return false;
    }
4

2 に答える 2

23 
$(elem).nextAll().remove();

セレクターを指定する必要がある場合は、同じ方法を使用して指定できます。

$(elem).nextAll('select.some-class').remove();
于 2012-07-09T22:12:28.120 に答える
0

現在の選択の後に発生する選択を削除するには、次を使用します。

var curSelect = $('select').index('select');
$('select').gt(curSelect).remove();

セレクターをに渡すとindex()は、兄弟要素の中から要素のインデックスを提供するのではなく、そのセレクターに一致するドキュメント内のすべての要素を検索することを意味します。

gt()curSelect変数によって渡されたインデックスよりも大きいインデックスを持つ初期セレクターによって返されたすべての要素を検索し、この場合、それらをremove()メソッドに渡します。

参照：

于 2012-07-09T22:14:42.480 に答える