Question

我有一个表单，您可以通过单击按钮动态添加步骤。每个步骤包含不同的输入字段。一步有一个，这里有一些选项。＆lt; select id =“zutatenListe”name =“zutatenListe”onchange =“updateZutaten（）”＆gt; ＆lt; option value =“0”＆gt; Tomate＆lt; / option＆gt; ＆lt; option value =“1”＆gt; Brot＆lt; / option＆gt; ＆LT; /选择＆GT; 它可能有多个，都具有相同的ID和名称。在select旁边，总会有一个输入字段，如下所示：＆lt; input id =“selectedZutat”type =“text”value =“”name =“wiegen_zutat []”＆gt; 我想要做的是，当您更改所选选项时，您选择的选项将仅显示在更改的选择旁边的输入元素中。它适用于第一个，但对于所有其他选择，它不适用。我的代码是这样的： function updateZutaten（）{ var eingabe; eingabe = $（“＃zutatenListe option：selected”）。text（）; $（“＃selectZutat”）。val（eingabe）; } 我的猜测是它只适用于第一个select元素，因为其他select元素具有相同的id。有谁知道如何处理这个问题？请不要被德国人的名字搞糊涂，但我来自德国。谢谢大家：）

Answer 1

标识符必须是唯一的，因为您正在使用jquery绑定事件。

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

此处的例子我已将<input>类添加到zutatenListe元素。

<select>

$(function() {

  $(document).on('change', '.zutatenListe', function() {

    var text = $(this).find("option:selected").text();
    $(this).next(".selectedZutat").val(text);
  });
});

Answer 2

也许可以参加change()活动？

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

因此，当更改事件触发时，它将始终设置所选选项吗？

Answer 3

为每组输入和选择使用唯一ID属性。 HTML和Jquery需要这个。

HTML4 Spec HTML5 Spec

Answer 4

以下是在JavaScript中执行此操作的方法。

＆＃13;

function updateZutaten(element) {
 
  var option = element.options[element.selectedIndex];
  var parent = element.parentElement;
  var textBox = parent.getElementsByTagName("input")[0];
  textBox.value = option.text;

}

＆＃13;

.formItems {
  list-style-type:none;
  padding:0;
  margin:0;
}

.formItems li {
  border-bottom:1px solid #EEE;
  padding: 10px 0;
}

＆＃13;

<form id="myForm">
  
  <ul class='formItems'>
     <li>
       
       <select id="zutatenListe"
               name="zutatenListe"
               onchange="updateZutaten(this)">
         <option value="">--Choose--</option>
         <option value="0">Tomate</option>
         <option value="1">Brot</option>
       </select>
       
       <input id="selectedZutat"
              type="text" value=""
              name="wiegen_zutat[]"
       />
     
     </li>
    
     <li>
               
       <select id="zutatenListe"
               name="zutatenListe"
               onchange="updateZutaten(this)">
         <option value="">--Choose--</option>
         <option value="0">Tomate</option>
         <option value="1">Brot</option>
       </select>
       
       <input id="selectedZutat"
              type="text" value=""
              name="wiegen_zutat[]"
       />
     
     </li>
  </ul>
  
  
  
</form>

＆＃13;

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

4 个答案: