如何在javascript中添加动态下拉列表

How to add dynamic drop-down in javascript?

本文关键字：添加动态下拉列表 javascript 更新时间：2023-09-26

我尝试在单击添加按钮时添加新的下拉字段，并且它正常工作，但是当我添加一些动态下拉框并填充值并单击新下拉框的添加按钮时，上述所有值都将被删除，那么如何在不删除现有值的情况下进行添加？

这是代码

<script>
     function addNew () {
        var NumOfField = document.getElementById('fields').value; 
        NumOfField = Number(NumOfField)+1;
        document.getElementById('fields').value = NumOfField;
        document.getElementById('newEvent').innerHTML += "<br><br><br><label class='control-label col-md-3 col-sm-3 col-xs-12'>Select </label><div class='col-md-9 col-sm-9 col-xs-12'><select class='form-control' name='event"+NumOfField+"'><option value='select'>Select</option><option value='1'>foo</option></option><option value='2'>baar</option></select></div>";
    }
    </script>

   <body>
   <input type="hidden" value="1" id="fields" name="fields">
   <div class="form-group" id="newEvent">
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Select Step 1</label>
    <div class="col-md-9 col-sm-9 col-xs-12">
    <select class="form-control" name="event1">
    <option value="select">Select</option>
    <option value="1">foo</option>
    <option value="2">bar</option>
    {% endfor %}
    </select>
   </div>
  </div>
 <button type="button"onclick="addNew();">Add</button>

这很简单，只需在片段中查看我提供的此示例即可。

您必须连接变量才能选择对象。
从用户那里获取选项的值和文本。
创建新的 DOM 元素。
配置此元素。
追加此元素。
为您的工作下拉菜单感到自豪。

它将像您在问题中一样使用引导程序。但是我删除了所有的骨架以提供整洁的答案。

有好的一天！

<select id="example">
  <option value="select">Select</option>
  <option value="1">foo</option>
  <option value="2">bar</option>
</select>
<hr/>
Value: <input type="text" id="val" />
<br/>
Option body: <input type="text" id="text" />
<button id="button">Add new option</button>
<script>
  var anchor = document.getElementById("example")
  function addNew() {
    var anchor = document.getElementById("example")
    var val = document.getElementById("val").value
    var text = document.getElementById("text").value
    alert(val+"=>"+text)
    if (val && text) {
      alert("adding new option")
      var option = document.createElement("option")
      option.classList.add("example")
      option.classList.add("example2")
      option.name = "for php"
      option.id = "you know"
      option.value = val
      option.text = text
      anchor.appendChild(option)
    } else {
      alert("fill the fields")
    }
  }
  document.getElementById("button").onclick = addNew
</script>