Question

我对编程非常陌生，而且还不是很擅长...我一直在寻找并试图让这个工作，但不能。无论如何，用户应该能够添加数字（http://codepen.io/anon/pen/dPaEoo），如果其中一个输入后面的选择选项被更改，它应该更改该输入字段的占位符。 enter code here

当我尝试它时（我尝试使用find，最接近，上一个和其他许多东西），它没有工作，它改变了所有的输入，或只是第一个......

任何帮助将不胜感激！

Answer 1

只需将其添加到您的js文件

即可

$('.optiesel').on('change',function() {
       $(this).prev('input').attr('placeholder',$(this).find(":selected").text()); 
});

编辑：这不适用于动态添加的元素（通常在应用.on时应该有效）但下面的代码可以替代它。

$(document).on('change', '.optiesel', function() {
    $(this).prev('input').attr('placeholder',$(this).find(":selected").text()); 
});

Answer 2

您可能会绊倒的两件事：确保您触发“更改”＃39;事件，而非点击＆＃39;关于选择的事件。并且，确保将事件处理程序绑定到新的.child节点。像这样：

$("#addBtn").click(function () {
    var newChild = $(".child:last").clone();
    newChild.appendTo("#wrapDiv");
    bindSelectActions();
});

$("#removeBtn").click(function () {
    if ($('.child').length > 1) {
      $("#wrapDiv").children(".child:last").remove();
    }
});
var bindSelectActions = function () {
    $('.optiesel').change(function () {
    $(this).closest('.child').find('.input').attr('placeholder',     $(this).val());
    });
}

如果它是最后一个元素

，我会避免使用remove函数

Answer 3

您正在动态添加新输入和选择。如果您为选择添加一个监听器，它将适用于在加载文档之前添加的监听器。您需要向父div添加一个侦听器，然后通过单击select来触发它。像这样：

$('#wrapDiv').on('change', 'select.optiesel', function(){
    $(this).siblings('input.input').attr('placeholder', $(this).val());
});

此外，当您向wrapDiv添加新子项时，您只是克隆最后一个子项，并且您正在处理所做的所有更改。将此代码的第三行添加到现有的Add函数中，将输入更改为原来的样式：

$("#addBtn").click(function () {
    var newChild = $(".child:last").clone();
    newChild.children('input').attr('placeholder', 'Thuisnummer (9 cijfers)').val('');
    newChild.appendTo("#wrapDiv");
});

如果只剩下孩子，也不要让用户删除孩子。那时没有什么可以克隆的。您可以使用它来检查条件：

if($("div#wrapDiv div.child").length > 1)

根据相关选择更改多个输入的占位符

3 个答案: