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/

Jquery Dropdown选择克隆表单上的更新输入字段

2 个答案: