如何在 Jquery 中创建影响所选 div 的函数

Question

我的目标是为选择创建一个函数，当更改时，它会更改输入中的占位符。我已经这么做了。

但我的问题是使该函数对我添加的任何新输入+选择都有效。这样做是为了我不必每次都使用新的 id 创建新函数。我需要一个仅影响我单击的内容的全局函数。

（最后，我添加了一个按钮来创建新表单，因此我需要全局函数来处理用户创建的任何新表单）

这是 Bootstrap 中的 html 表单（我将代码减少到必要的程度）

<div id="form">

  <input name="telefono" type="text" id="telefono" placeholder="Móvil">

  <select>

    <option value="Móvil">Móvil</option>

    <option value="Casa">Casa</option>

    <option value="Trabajo">Trabajo</option>

  </select>

</div>

这是jQuery中的函数

$(function(){   

  $("#form").find("select").change(function(){

    $("#form").find("input").attr("placeholder", $(this).find(":selected").val());

  });

});

使用此代码，我可以更改我创建的第一个 div 表单，但不能更改新的 div 表单。

我正在使用 Bootstrap 作为表单。

Answer 1

您可以使用以下代码。希望它会起作用。$(function(){&nbsp; &nbsp;&nbsp; $(document).on("change", "select", function(){&nbsp; &nbsp; &nbsp; &nbsp; var selectedValue = $(this).find(":selected").val();&nbsp; &nbsp; &nbsp; &nbsp; var parent = $(this).closest("#form");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; parent.find("input").attr("placeholder",selectedValue);&nbsp; });});

Answer 2

要让您的函数适用于所有动态添加的select和input元素，您必须使用以下change()方法从页面最初加载时已经存在的父元素select传递事件on()：$(function(){     $(document).on("change", "select", function(){     $(this).prev("input").attr("placeholder", $(this).find(":selected").val());  }); });摆弄jQuery on()