如何通過onclick函數將選項列表中的值獲取到連續的輸入字段中

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函數，將從-list中選擇的值顯示在第一個輸入字段中。

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

如何在第二個輸入字段中獲得下一個選定的值，依此類推？ 此功能也應該在附加字段中起作用。

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/

Answer 2

好吧，這取決於函數sendproductnameinput()的定義位置，但是如果變量counter在其作用sendproductnameinput()可見，我將敢於編寫如下內容：

var timesSomethingSelected = 1;

function sendproductnameinput() {
    var productinput = 'productinput';

    if(timesSomethingSelected > 1) {
        productinput += timesSomethingSelected;
        timesSomethingSelected++;
    } else if(timesSomethingSelected == counter) {
        //Do something if there aren't more inputs.
    }

    document.formdatabase[productinput].value = document.formdatabase. productselect.value;
}