Jquery Dropdown在克隆表格上選擇更新輸入字段

Question

所以我有一個表格，我動態地克隆了Jquery .clone。所以當用戶在下拉菜單中選擇一個取決於值的選項時，它會自動更新一個帶有值的文本框，同時仍然允許用戶改變它們的值，如果他們不同意那裏的是什麼的話。代碼，我有更新字段，但它是更新所有輸入字段的ID我指定我已經嘗試引用父項，然後尋找與ID的下一個輸入框。我不確定是否我正在處理這個錯誤。任何幫助，將不勝感激。

我的表單代碼：

<div id="test"> 
     <span> 
      <label> 
       File Type: 
       <select id="book_type") 
        <option value="1">1</option> 
        <option value="2">2</option> 
        <option value="3">3</option> 
       </select> 
      </label> 
      <label> 
       Book ID<input type="text" id="book_id" name="book_id" /> 
      </label> 
      <label> 
       Tray Number:&nbsp;<input type="text" name="tray_number" required id="tray_number" class="tray_nu" placeholder="Required" value="" /> 
      </label> 
      <label> 
       Comments: <input type="text" name="comments" id="comments" value="" /> 
       <input type="button" id="delBttn" name="delBttn" disabled value="X" /> 
      </label> 
     </span> 
    </div> 
    <div id="new_section"></div> 
<input type="button" id="addbutton" value="Add Another Book" /> 

我複製代碼（偉大的工程）和我改變的代碼（這是不正常）

$(document).ready(function() { 
    $("#addbutton").click(function(){ 
     var clone = $("#test").clone(true).insertBefore("#new_section:last"); 
     clone.find('[id*="delBttn"]').attr('disabled', false); 
     clone.find('[id*="book_type"]').val(''); 
     clone.find('[id*="comments"]').val(''); 
    }); 

$("#delBttn").click(function(e) { 
    $(this).closest("span").remove(); 
    e.preventDefault(); 
}); 
$("#book_type").change(function(){ 
    var book_type = $(this).val(); 
    if(book_type === '2'){ 
     $('span').parent().find("#tray_number").val('2'); 
    } 
}); 

}); //end of DOM 

所以，現在當你點擊下拉框並將其更改爲選項2，它用選項2的值填充所有框。我試圖讓它只在與下拉框相同的行中更改托盤編號的值。

Answer 1

您正在選擇更改處理程序中頁面上的所有跨度。要獲取作爲已更改下拉列表的父跨度，可以使用$(this)獲取已更改的<select>元素，並使用.closest('span')遍歷DOM樹並選擇該選擇的父節點的第一個跨度。

$("#f_types").change(function(){ 
    var book_type = $(this).val(); 
    if(book_type === '2'){ 
     $(this).closest('span').find("#tray_number").val('2'); 
    } 
}); 

Answer 2

您在下面的示例中已經修復了您的HTML和JavaScript的相關問題。最大的問題是你最終會得到重複的ID，並且你不能有多個具有相同ID的元素。

更改類的ID後，使用此代碼找到類「test」最近的父級，然後找到具有類「tray_nu」的子級並設置其值。

$(this).closest('span').find(".tray_nu").val('2'); 

完整的例子：

HTML：

<div class="test"> <span> 
    <label>File Type: 
     <select class="book_type"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
     </select> 
    </label> 
    <label>Book ID 
     <input type="text" class="book_id" name="book_id" /> 
    </label> 
    <label>Tray Number:&nbsp; 
     <input type="text" name="tray_number" required class="tray_nu" placeholder="Required" value="" /> 
    </label> 
    <label>Comments: 
     <input type="text" name="comments" class="comments" value="" /> 
     <input type="button" class="delBttn" name="delBttn" disabled value="X" /> 
    </label> 
    </span> 
</div> 
<div id="new_section"></div> 
<input type="button" id="addbutton" value="Add Another Book" /> 

的JavaScript：

$(document).ready(function() { 
    $("#addbutton").click(function() { 
     var clone = $(".test").clone(true).insertBefore("#new_section:last"); 
     clone.attr('class', 'testnew'); 
     clone.find('[class*="delBttn"]').attr('disabled', false); 
     clone.find('[class*="book_type"]').val(''); 
     clone.find('[class*="comments"]').val(''); 
    }); 

    $(".delBttn").click(function (e) { 
     $(this).closest("span").remove(); 
     e.preventDefault(); 
    }); 
    $(".book_type").change(function() { 
     var book_type = $(this).val(); 
     if (book_type === '2') { 
      $(this).closest('span').find(".tray_nu").val('2'); 
     } 
    }); 

}); //end of DOM 

演示：http://jsfiddle.net/BenjaminRay/mv9y6xrL/