[英]How can I put the selected option of a <select> from a dynamically generated form into an input field
I have a form, where you can dynamically add steps by clicking a button. 我有一个表单,您可以在其中通过单击按钮来动态添加步骤。 Each step contains different input fields. 每个步骤包含不同的输入字段。 One step has a ,which is filled with some options like this. 第一步有一个,其中包含一些类似的选项。
<select id="zutatenListe" name="zutatenListe" onchange="updateZutaten()">
<option value="0">Tomate</option>
<option value="1">Brot</option>
</select>
It is possible that there are multiple of it, all with the same id and name. 它可能有多个,并且都具有相同的ID和名称。 Next to the select, there is always an input field like this: 在选择旁边,总是有一个像这样的输入字段:
<input id="selectedZutat" type="text" value="" name="wiegen_zutat[]">
What I want to make is that when you change the selected option, your selected option will be shown only in the input element next to the changed select. 我要说的是,当您更改所选选项时,所选选项将仅显示在更改的选项旁边的输入元素中。 It works for the first one, but for all other selects, it doesn't. 它适用于第一个选择,但不适用于所有其他选择。 My code is this: 我的代码是这样的:
function updateZutaten(){
var eingabe;
eingabe = $("#zutatenListe option:selected").text();
$( "#selectedZutat").val(eingabe);
}
My guess is that it only works for the first select element, because the other select elements have the same id. 我的猜测是,它仅适用于第一个选择元素,因为其他选择元素具有相同的ID。 Has anyone an idea how to take care of this problem? 有谁知道如何解决这个问题? Please don't get confused by the German names, but I'm from Germany. 请不要对德国的名字感到困惑,但是我来自德国。
Thank you everyone :) 谢谢大家 :)
Identifiers must be unique and as you are using jquery bind event using it. 标识符必须是唯一的,并且在使用jquery绑定事件时要使用它。
Add a common class to target the <select>
element, this will help you select them using Class Selector (".class") and bind event using it, then you can use .next()
target the next <input>
element. 添加一个公共类以<select>
元素为目标,这将帮助您使用Class Selector(“ .class”)选择它们并使用它绑定事件,然后您可以使用.next()
定位下一个<input>
元素。
Here in exmple I have added zutatenListe
class to <select>
element. 例如,我在这里将zutatenListe
类添加到<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>
Maybe work on the change()
event? 也许在change()
事件上工作?
$("#zutatenListe").change( function () {
var eingabe;
eingabe = $("#zutatenListe option:selected").text();
$( "#selectedZutat").val(eingabe);
})
So it will always set the selected option when the change event fires? 因此,它将在更改事件触发时始终设置选定的选项吗?
Use unique ID attributes for each set of input and selects. 对每组输入和选择使用唯一的ID属性。 HTML and Jquery require this. HTML和Jquery要求此。
Here's a way to do it in JavaScript. 这是使用JavaScript的一种方法。
function updateZutaten(element) { var option = element.options[element.selectedIndex]; var parent = element.parentElement; var textBox = parent.getElementsByTagName("input")[0]; textBox.value = option.text; }
.formItems { list-style-type:none; padding:0; margin:0; } .formItems li { border-bottom:1px solid #EEE; padding: 10px 0; }
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.