0

jqueryで少しレンガの壁にぶつかって、私は現在次のコードを持っています：

http://jsfiddle.net/uSLhb/1/

クローンメソッドは次のとおりです。

$("#addMore").click(function() {
    $('.user_restriction:last').clone().insertAfter(".user_restriction:last");
    return false;
});

ご覧のとおり、行のクローンを簡単に作成できるように設定しています。

私が直面している問題は、行の最初の選択（「テーブル」列）フィールドから選択したフィールドに応じて、新しい複製要素に正しい選択リスト（「フィールド」列）を表示することです。

誰かが私が解決策を見つけるのを手伝ってくれるかどうか疑問に思っています、ありがとう！

4

2 に答える 2

1

ここでの作業例-フィドルが再生されたため、jsbinを使用する必要がありました!

クローンは選択された状態を維持しないため、クローンを作成する前に値を取得し、後で設定する必要があります。

クリックは次のようになります。

$("#addMore").click(function() {
   var value = $('.user_restriction:last').find('select').val(); 
  $('.user_restriction:last').clone().insertAfter(".user_restriction:last");

        //alert(value);
$('.user_restriction:last').find('select').val(value);
    return false;
});
于 2013-02-21T18:38:55.800 に答える
1

選択にIDを使用しているため、直面している問題が発生します。IDはページ内で一意である必要があります。そうしないと、問題が発生します。ID を使用して選択を複製する場合、ID も複製されるため、無効なドキュメントが作成されます。

私が JsBin で作成した例を見てください。

マークアップ:

<tr class="user_restriction">
    <td>
        <select name="table[]" class="userselect">
            <option value="" selected>---</option>
            <option value="members">Members</option>
            <option value="staff_positions">Staff Positions</option>
        </select>
    </td>
    <!-- and so on, basically just changed ids to classes -->            
</tr>

これは 2 番目の問題だったので、すべての ID をクラスに変更し、変更ハンドラを変更しました。

イベント ハンドラは、後で追加する要素ではなく、選択された要素にバインドされます。これは、ハンドラーが親にバインドされ、DOM にいつ追加されたかに関係なく、この例では子 select-element からの変更イベントをキャッチする場合、イベント委任の適切な使用例です。

jQuery を使用して、これを実現する方法は次のとおりです。

$('table.table').on('change', '.userselect', function() {

    var activeRow = $(this).parents('tr');

    activeRow.find('td').eq(1).find('select').hide();

    if(this.value.length === 0){
        activeRow.find('td').eq(1).find('select').eq(0).show();
    }else{
        activeRow.find("." + this.value).show();
    }

});

ハンドラーはあなたのtable- 要素にバインドさ.userselectれており、行の最初の選択に追加したクラスです。したがって、後で追加された要素のすべての変更も処理されます。ハンドラーで、テーブル全体ではなく、実際のテーブル行のみに影響するように動作を変更しました。

于 2013-02-21T19:05:19.277 に答える