0

ドロップダウン メニューとその下に div があるページがあります。メニューから何を選択するかによって、div に読み込まれるものが決まります。どのメニュー値が選択されたかを知るために、div 内で動的に呼び出されるコンテンツが必要です。また、動的コンテンツのロード中に変更される可能性のある他のドロップダウン メニューの値を取得できる必要もあります。

動的コンテンツ領域内から送信ボタンがクリックされると、これらの値をすべて取得する必要があります。jquery から .parent() を使用しようとしていますが、まだ機能していないため、機能しないと感じています。

外部の動的にロードされたコンテンツから入力フィールドの値を取得する方法に関するアドバイスとヘルプをいただければ幸いです。

これは、メイン ページの Jquery と Html です。

<script>
$(document).ready(function() {

    $("#men2link").click(function(){
         $.ajax({ url: 'pages/abc.php', success: function(html) {
            $("#subajax-content").empty().append(html);
            }
        });
    });
});
</script>

<table>
    <tr>
      <td>
            <table>
                <tr>
                    <td>Menu 1:</td>
                    <td>
                        <select name="men1" id="men1">
                            <option>Select Option</option>
                            <option value="o1">option1</option>
                            <option value="o2">option2</option>
                            <option value="o3">option3</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td id="men2link">Menu 2</td>
                    <td>        
                        <select name="men2" id="men2">
                            <option>Select Option</option>
                            <option value="r">Received</option>
                            <option value="nr">Not Received</option>
                            <option value="na">Not Applicable</option>
                        </select>
                    </td>
                </tr>
            </table>
      </td>
      <td class="align-top"><div id="subajax-content"></div></td>
    </tr>
</table>

subajax-content div に動的にロードされる Html & JQuery

<script>
$(document).ready(function() {
    $("#save").click(function(){
       alert($("#home").parent("#men2").val());
    });
});
</script>
4

2 に答える 2

0

まず、外部表を識別可能にします。単一のテーブルの場合は ID を使用でき、繰り返しテーブルの場合はクラスを使用できます。

<table id="outerTable">
<!-- or -->
<table class="outerTable">

これで、必要な jQuery のブロックが 1 つだけになりました。これは動的に挿入されたコンテンツに応答するため、コンテンツとともに javascript/jQuery を配信する必要はありません。

$(document).ready(function() {

    //This part is unchanged
    $("#men2link").click(function() {
        $.ajax({
            url: 'pages/abc.php', 
            success: function(html) {
                $("#subajax-content").empty().append(html);
            }
        });
    });

    //This part is a modified version of what was previously delivered with the dynamic content
    //For use with id="outerTable"
    $("#outerTable").on('click', "#save", function() {
        var $outerTable = $(this).closest(".outerTable"),
            val1 = $outerTable.find("#men1").val(),
            val2 = $outerTable.find("#men2").val();
        alert([val1, val2]);
    });
});

ノート：

  • それぞれ独自の内部テーブルを持つ外部テーブルを繰り返す場合、コードはわずかに異なります。
  • 唯一の外部テーブル内で内部テーブルを繰り返す場合、コードはわずかに異なります。
  • 繰り返しの外側のテーブルまたは繰り返しの内側のテーブルでは、選択メニューと保存ボタンにも ID ではなくクラスが必要です。
于 2012-07-03T11:23:15.540 に答える
0

それほど厳密ではないため、parent() の代わりに「closest()」を使用できます。

于 2012-07-03T10:33:38.280 に答える