Question

我可以像这样动态添加文本框：

<html>
<body>

<div id='item'></div>

<input name='add' type='button' id='add' value='Add Item'/>

</body>
</html>

<script type="text/javascript">

var item = document.getElementById('item');

var stopper=0;

document.getElementById('add').onclick = function () {

stopper=stopper+1;

  var input = document.createElement('input'),
      div = document.createElement('div');
  input.type = "text";
  input.setAttribute("name", "item[]");
  input.setAttribute("class", "item");

  div.appendChild(input);
  //...

  item.appendChild(div);

};
</script>

JS Fiddle

我该怎么做？我希望动态生成下拉列表（<select>），而不是文本框。下拉列表中的选项将来自我的 SQL数据库。

Answer 1

将createElement('input')替换为createElement('select')，然后以相同的方式创建其他option元素：var opt1 = document.createElement('option')并设置转到服务器的属性（value和用户在每个元素上看到的text。然后将每个option对象附加到select对象，并将select对象附加到DOM中，就像现在使用input对象一样。

这是一个使用动物数组并将第一个字母作为值发送到服务器的示例：

var items = ['aardvark', 'bear', 'cat', 'donkey'];
var values = ['a', 'b', 'c', 'd'];
var sel = document.createElement('select');
sel.setAttribute('name', 'item[]');
for (var i = 0; i < 4; i++) {
    var opt = document.createElement('option');
    opt.setAttribute('text', items[i]);
    opt.setAttribute('value', values[i]);
    sel.appendChild(opt);
}
// ... from here on, set any other attributes, like classes
// Then and add the select object to the DOM:
item.appendChild(sel);

Answer 2

嗨，请尝试使用此代码。

        <html>
    <body>

    <div id='item'></div>

    <input name='add' type='button' id='add' value='Add Item'/>

    </body>
    </html>

    <script type="text/javascript">
        var item = document.getElementById('item');

        var stopper=0;

        document.getElementById('add').onclick = function () {

        stopper=stopper+1;

         var select = document.createElement('select'),
              div = document.createElement('div');

          select.setAttribute("name", "item[]");
          select.setAttribute("class", "item");
            //this is just an example. You need to replace this code with ajax that is fetching 
//from the Database.. and please use jquery it makes your work easier.
            var  count = getRandomInt(1, 5);
            for(var a=1; a<=count; a++) {
                var option = document.createElement('option');
                 var t =  randon_val();
            //end
              option.setAttribute("value",t);
              option.appendChild(document.createTextNode(t));
                select.appendChild(option);
            }



          div.appendChild(select);
          item.appendChild(div);

        };

        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        function randon_val()
        {
            var text = "";
            var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

            for( var i=0; i < 5; i++ )
                text += possible.charAt(Math.floor(Math.random() * possible.length));

            return text;
        }
    </script>

Answer 3

这个链接会很有帮助。 How to dynamically create a drop-down list with JavaScript and jQuery你也可以试试这个方法。

function addItemToList(){
        //create label for the dropdown
        var label = document.createElement("label");
        label.innerHTML = "Select an Item: "

        //dropdown values
        var valuerArray = ["V1", "V2", "V3", "V4"];
        var textArray = ["TEXT1", "TEXT2", "TEXT3", "TEXT4"];

        //create dropdown
        var select = document.createElement("select");
        select.name = "dropdownName";
        select.id = "dropdownId"

        //dropdown items
        for (var i = 0; i < valuerArray.length; i++) {
            var option = document.createElement("option");
            option.value = valuerArray[i];
            option.text = textArray[i];
            select.appendChild(option);
        }

        //add label and dropdown to HTML containers
        document.getElementById("labelContainer").appendChild(label);
        document.getElementById("itemContainer").appendChild(select);
    }

<HTML>
 <body>
  <table>
   <tr>
    <td><div id="labelContainer"></div></td>
    <td><div id="itemContainer"></div></td>
    <td><input name='add' type='button' id='add' value='Add Item' onclick='addItemToList()' /></div></td>
   </tr>
  </table>
 </body>
</html>

动态添加下拉列表

3 个答案: