21

私はasp.net mvc 3アプリケーションに取り組んでいます。データベースからのデータを使用してテーブルを動的に構築しています。行の 3 番目の列/セルがドロップダウンである場合があります。

<select name="YesNoNotApplicable" class="YesNoNotApplicable">
                            <option value="1">Yes</option>
                            <option value="2">No</option>
                            <option value="3">Not Applicable</option>
                        </select>

この場合、4 番目の列/セルは空のままになり、ユーザーが 4 番目のセルで 3(該当なし) を選択すると、ユーザーが追加情報を書き込むことができるテキスト ボックスが表示されます。私はJSとjQueryの知識が乏しいですが、ドロップダウンから選択した値を取得する方法を見つけました:

$(document).ready(function () {
        $('.YesNoNotApplicable').change(function () {
            alert($('.YesNoNotApplicable').val());
        });
    });

しかし、代わりに、値が 3 であるかどうかを確認する必要があるアラート (これは私が自分でできる範囲です)、次のセルからテキストボックスを表示/非表示または追加/削除するか、DOM の見通しで話しているかどうかを確認する必要があります。

では、class=YesNoNotApplicable を使用して次のテキスト ボックスに移動するにはどうすればよいでしょうか。また、このテキスト ボックスを処理する最善の方法は何ですか。実行時にそれを使用して追加/削除しますが、どうすればそれを行うことができますか?

4

5 に答える 5

58

ビューに厳密に型指定されたモデルと html ヘルパーを使用している場合は、テーブルの作成中に入力要素を作成することをお勧めします。その理由は、jQuery を介して作成する要素がモデルにバインドされないためです。

$(document).ready(function () {
   $('.YesNoNotApplicable').change(function () {
       if($(this).val() === "3")
         $(this).closest('td').next('td').find('input').show();
   });
});
于 2013-05-14T12:58:45.393 に答える
11

changeコールバック内でthis、要素を参照しselectます。したがって、次のように、tdそれを含むを見つけることができます。closesttdnexttd

var $nextTD = $(this).closest('td').next();

同様のことを行いたいがテーブルではなく、見つけたい兄弟が複数の要素から離れている可能性がある、より一般的なケースでは、 を使用できますnextAll("selector").first()。しかし、必要なものが次の要素であり、それが確実である場合は、必要ありませんnextAll。

于 2013-05-14T12:54:32.710 に答える
2 
$(document).ready(function () {
   $('.YesNoNotApplicable').change(function () {
       if($(this).val() === "3"){
         $(this).closest('td').next('td').find('input:text').show();
       }
   });
});
于 2013-05-14T12:55:04.547 に答える
0

var nextCell = $(this).closest('td').next();

そして、次のセルで作業できます。

于 2013-05-14T12:58:27.490 に答える