javascript - 如何将动态生成的表单中 <select> 的选定选项放入输入字段

Question

我有一个表单，您可以通过单击按钮动态添加步骤。每个步骤包含不同的输入字段。其中一个步骤有一个，里面充满了这样的一些选项。

 <select id="zutatenListe" name="zutatenListe" onchange="updateZutaten()">
    <option value="0">Tomate</option>
    <option value="1">Brot</option>
</select>

可能有多个，并且都具有相同的 id 和名称。 在选择旁边，总是有一个像这样的输入字段:

<input id="selectedZutat" type="text" value="" name="wiegen_zutat[]">

我想要做的是，当您更改所选选项时，您选择的选项将仅显示在更改后的选择旁边的输入元素中。它适用于第一个，但对于所有其他选择，则无效。我的代码是这样的:

function updateZutaten(){
        var eingabe;
        eingabe = $("#zutatenListe option:selected").text();    
        $( "#selectedZutat").val(eingabe);
}

我的猜测是它只适用于第一个 select 元素，因为其他 select 元素具有相同的 id。有谁知道如何解决这个问题？ 请不要对德国名字感到困惑，但我来自德国。

谢谢大家:)

Answer 1

标识符必须是唯一的，并且您正在使用 jquery使用它绑定(bind)事件。

添加一个通用类来定位 <select>元素，这将帮助您使用 Class Selector (".class") 选择它们并使用它绑定(bind)事件，然后您可以使用 .next() 下一个目标<input>元素。

在此示例中，我添加了 zutatenListe类(class) <select>元素。

$(function() {

  $(document).on('change', '.zutatenListe', function() {

    var text = $(this).find("option:selected").text();
    $(this).next(".selectedZutat").val(text);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select class="zutatenListe" name="zutatenListe">
    <option value="0">Tomate</option>
    <option value="1">Brot</option>
  </select>
  <input class="selectedZutat" type="text" value="" name="wiegen_zutat[]">
</div>
<div>
  <select class="zutatenListe" name="zutatenListe">
    <option value="0">Tomate</option>
    <option value="1">Brot</option>
  </select>
  <input class="selectedZutat" type="text" value="" name="wiegen_zutat[]">
</div>