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

Question

我对编程还很陌生，还不是很擅长...我一直在搜索并试图让它工作，但没有成功。无论如何，用户应该能够添加数字 (http://codepen.io/anon/pen/dPaEoo)，并且如果更改其中一个输入后面的 select 选项，它应该更改该输入字段的占位符。 enter code here

当我尝试它时（我尝试使用 find、closest、prev 和许多其他东西），它没有用，它改变了所有输入，或者只是第一个...

如有任何帮助，我们将不胜感激！

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

您可能会被两件事绊倒：确保您触发的是 'change' 事件，而不是选择的 'click' 事件。并且，确保将事件处理程序绑定到新的 .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());
    });
}

如果它是最后一个元素，我会避免删除函数

Answer 3

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

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

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

$("#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)

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

Changing the placeholder for multiple inputs based on relevant select

jquery

select

placeholder