动态添加下拉列表 - Dynamically add drop down list

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

<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小提琴

我该怎么做?代替文本框，我想动态地生成一个下拉 (<select>)。下拉菜单的选项将来自我的SQL数据库。

将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);

请试试这个代码

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

这个链接会很有帮助。如何使用JavaScript和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>