2012-07-03 29 views
0

我有一個頁面,下面有一個下拉菜單和一個div。根據您從菜單中選擇的內容,確定div中的加載情況。我需要div內動態調用的內容才能知道選擇了哪個菜單值。它還需要能夠檢索在加載動態內容時可以更改的其他下拉菜單值。Jquery從動態內容中獲取價值

一旦從動態內容區域內單擊提交按鈕,就需要抓取所有這些值。我試圖從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> 

的Html & JQuery的動態加載到subajax內容DIV

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

需要查看HTML和您嘗試過的javascript/jQuery。 –

+0

好吧,會得到一些 – Somk

回答

0

您可以使用「最接近()「而不是parent(),因爲它不是那麼嚴格

0

首先,使外表可識別。對於唯一的表,你可以使用一個ID或重複表,使用類:

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

現在,你只需要一個jQuery的塊。這將響應動態插入的內容,因此不需要爲內容提供更多的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。