我怎樣才能把選擇的選項 <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);
}

我的猜測是，它僅適用於第一個選擇元素，因為其他選擇元素具有相同的ID。 有誰知道如何解決這個問題？ 請不要對德國的名字感到困惑，但是我來自德國。

謝謝大家 ：）

Answer 1

標識符必須是唯一的，並且在使用jquery綁定事件時要使用它。

添加一個公共類以<select>元素為目標，這將幫助您使用Class Selector（“ .class”）選擇它們並使用它綁定事件，然后您可以使用.next()定位下一個<input>元素。

例如，我在這里將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> 

Answer 2

也許在change()事件上工作？

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

因此，它將在更改事件觸發時始終設置選定的選項嗎？

Answer 3

對每組輸入和選擇使用唯一的ID屬性。 HTML和Jquery要求此。

HTML4規范 HTML5規范

Answer 4

這是使用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>