如何通过onclick-function将选项列表中的值转换为连续的输入字段

时间:2016-12-30 15:18:28

标签: javascript html function

我有一个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;
}

如何在第二个输入字段中获取下一个选定的值,依此类推?此功能也适用于额外添加的字段。

2 个答案:

答案 0 :(得分:1)

您可以使用:

 ListView listView = parent as ListView;
 int start = listView.FirstVisiblePosition;
 int end = listView.LastVisiblePosition;
 int numberOfVisibleItems = end - start + 1;

你的选择似乎不是多选,所以我想你想在每个输入中放入相同的选定值。

如果有多个选择,你可以使用它:

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

这是一个小提琴https://jsfiddle.net/586menbv/16/

答案 1 :(得分:0)

嗯,这取决于函数sendproductnameinput()的定义位置,但如果变量counter在其范围内可见,我敢写这样的东西:

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;
}