option-listからonclick-functionで連続した入力フィールドに値を取得する方法

Question

私はデータベースからデータを読み出すためのhtml形式を持っています。 ボタンをクリックすると、追加の入力フィールドを作成することができます。

<table> 
    <tr> 
     <td> 
     <input type="text" id="productinput" name="productinput[]" class="awesomplete" list="productselect" size="20"/> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <input type="text" id="productinput2" name="productinput[]" class="awesomplete" list="productselect" size="20"/> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <input type="text" id="productinput3" name="productinput[]" class="awesomplete" list="productselect" size="20"/> 
     </td> 
    </tr> 
</table> 
<script> 
    var counter = 1; 

    var limit = 10; 

    function addInput(divName){ 

     if (counter == limit) { 

      alert("You have reached the limit of adding " + counter + " inputs"); 

     } 

     else { 

    // Create new div 
    var newdiv = document.createElement('div'); 
    newdiv.innerHTML = '<br><input type="text" name="productinput[]" class="awesomplete" list="productinputselect" size="20"/>'; 
    document.getElementById(divName).appendChild(newdiv); 

    // Re instantiate Awesomplete 
    new Awesomplete(newdiv.querySelector('input'), { list: document.querySelector('#productinputselect') }); 

    // Set counter 
    counter++; 

     } 

    } 
</script> 
<div id="dynamicInput"> 
    <b></b><input type="text" id="productinput4" name="productinput[]" class="awesomplete" list="productinputselect" size="20"/> 
</div> 
<input type="button" value="Additional Input Field" onClick="addInput('dynamicInput');"> 
<select name="productselect" id="productselect" size="9" onclick="sendproductnameinput()"> 
<?php 
    include("../files/zugriff.inc.php");  // database access 

    $sql = "SELECT * FROM product_main ORDER BY Name"; 
    $result = mysqli_query($db, $sql); 
    while ($row = mysqli_fetch_assoc($result)) { 
    echo '<option class="optproduct" value='. $row['Name'] . '>' . $row['Name']. '</option>'; 
    echo '<br>'; 
    } 
    mysqli_close($db); 
    ?> 
</select> 

これまでのところ、これは正常に機能します。

次のjavascript-functionを使用すると、-listから選択した値が最初の入力フィールドに表示されます。

function sendproductnameinput() { 
    document.formdatabase.productinput.value = document.formdatabase. productselect.value; 
} 

2番目の入力フィールドで次の値を取得するにはどうすればよいですか？この関数は、追加されたフィールドでも機能します。

Answer 1

あなたはこれを使用することができます：

for (var i = document.formdatabase.length - 1; i >= 0; i--) { 
     document.formdatabase[i].value = document.formdatabase.productselect.value; 
    } 

あなたの選択は複数選択ではないように思わので、私はあなたがそれぞれの入力に同じ選択した値を入れたいとします。

そして、あなたは、この使用することができますよりも、複数選択した場合：ここ

function getSelectValues(select) { 
    var result = []; 
    var options = select && select.options; 
    var opt; 

    for (var i=0, iLen=options.length; i<iLen; i++) { 
    opt = options[i]; 

    if (opt.selected) { 
     result.push(opt.value || opt.text); 
    } 
    } 
    return result; 
} 

function sendproductnameinput() { 
    var selected = getSelectValues(document.formdatabase.productselect); 

    for (var i = document.formdatabase.length - 1; i >= 0; i--) { 
     if(i < selected.length) { 
      document.formdatabase[i].value = selected[i]; 
     } 
    } 
} 

はフィドルhttps://jsfiddle.net/586menbv/16/