有沒有辦法組合下拉菜單 <select>帶有文本字段的菜單？

Question

下午好，Stackoverflow的人們，

我有以下javascript代碼，並且我想在每個“成員”文本字段之前添加一個由數組定義的下拉選擇菜單。 select和text中的兩個值都應使用模式select（element：member）保存在mySQL中的單個結構化數據值中。 首先定義成員數量的代碼中的功能應保持原樣。

我已經嘗試使用javascript定義第二個document.createElementById：

var array = ["menu1","menu2","menu3"];
var selectList = document.createElement("select");
selectList.setAttribute("id", "mySelect");

但它似乎沒有用。

<html>
<head>
<script type='text/javascript'>
    function addFields(){
        var number = document.getElementById("member").value;
        var container = document.getElementById("container");
        while (container.hasChildNodes()) {
        container.removeChild(container.lastChild);
        }
        for (i=0;i<number;i++){
            container.appendChild(document.createTextNode("Member " + (i+1)));
            var input = document.createElement("input");
            input.type = "text";
            input.name = "member" + i;
            container.appendChild(input);
            container.appendChild(document.createElement("br"));
        }
    }
</script>
<body>
        <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br/>
        <a href="#" id="filldetails" onclick="addFields()">FillDetails</a>
        <div id="container"/>
</body>
</head>
</html>

該代碼可以通過http://jsfiddle.net/t656N/1/進行測試

我願意達到的結果是這樣的： https : //imgur.com/a/RDMjNkx

Answer 1

使用第二個for和createElement使它工作，如下所示：

<script type='text/javascript'>
function addFields() {
  var number = document.getElementById("member").value;
  var container = document.getElementById("container");
  var optionsSelect = [
    {
      id: 1,
      title: 'Option 1'
    },
    {
      id: 2,
      title: 'Option 2'
    },
    {
      id: 3,
      title: 'Option 3'
    }
  ];

  while (container.hasChildNodes()) {
    container.removeChild(container.lastChild);
  }
  for (i = 0; i < number; i++) {
    var select = document.createElement('select');
    for (var j = 0; j < optionsSelect.length; j++) {
      var options = document.createElement("option");
      options.value = optionsSelect[j].id;
      options.text = optionsSelect[j].title;
      select.appendChild(options);
    }
    container.appendChild(select);
    container.appendChild(document.createTextNode(" -> Description " + (i + 1) + " "));
    var input = document.createElement("input");
    input.type = "text";
    container.appendChild(input);
    container.appendChild(document.createElement("br"));
  }
}
</script>

有沒有辦法組合下拉菜單 <select>帶有文本字段的菜單？

問題描述

1 個解決方案

解決方案1
0 已采納 2019-01-24 08:09:09

有沒有辦法組合下拉菜單 <select>帶有文本字段的菜單？

問題描述

1 個解決方案

解決方案1 0 已采納 2019-01-24 08:09:09

解決方案1
0 已采納 2019-01-24 08:09:09