2015-04-02 81 views
0

所以我有一个表格,我动态地克隆了Jquery .clone。所以当用户在下拉菜单中选择一个取决于值的选项时,它会自动更新一个带有值的文本框,同时仍然允许用户改变它们的值,如果他们不同意那里的是什么的话。代码,我有更新字段,但它是更新所有输入字段的ID我指定我已经尝试引用父项,然后寻找与ID的下一个输入框。我不确定是否我正在处理这个错误。任何帮助,将不胜感激。Jquery Dropdown在克隆表格上选择更新输入字段

我的表单代码:

<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的值填充所有框。我试图让它只在与下拉框相同的行中更改托盘编号的值。

+0

你^ h有多个ID的问题。看到我的答案也解决了这些问题。 – 2015-04-02 16:56:07

回答

-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'); 
    } 
}); 
-1

您在下面的示例中已经修复了您的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/

+0

当您单击添加另一本书两次以上时,代码中存在一个错误,它克隆了所有现有的dom。 – harshes53 2015-04-02 16:46:48

+0

将克隆dom上的类名从测试更改为其他任何内容..我认为它应该可以工作然后 – harshes53 2015-04-02 16:50:30

+0

这样做的窍门,谢谢。 – 2015-04-02 16:52:37