Question

我有一个带有输入的表，一旦提交，就会根据输入的内容创建一个下拉菜单。我正在使用的脚本会删除重复项，并忽略空白单元格，但是如果您更改输入的内容，那么它将保留相同的选项并将新的输入添加到下拉列表中。每次使用javascript提交真正的动态列表时，是否有可能在每次输入输入时重置下拉选项？

function submit() {

  for (i = 1; i < 6; i++) {
    var inputSelect = document.getElementById("select");
    var option = document.createElement("option");
    var select = document.getElementById("input" + i).value

    if (select.trim() !== '') {
      option.text = select
      inputSelect.add(option, inputSelect[0])

      var usedNames = {};
      $("select[name='select'] > option").each(function() {
        if (usedNames[this.text]) {
          $(this).remove();
        } else {
          usedNames[this.text] = this.value;
        }
      });

    }
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="submit()">submit</button>
<select name="select" id="select">
</select>

<table>
  <tbody>
    <td><input id="input1"></td>
    <td><input id="input2"></td>
    <td><input id="input3"></td>
    <td><input id="input4"></td>
    <td><input id="input5"></td>
    <td><input id="input6"></td>
    </body>
</table>

Answer 1

function submit(){
  var inputSelect = document.getElementById("select");
  inputSelect.innerHTML = "";
  for (i=1;i<6;i++){
    var option = document.createElement("option");
    var select = document.getElementById("input" + i).value

    if (select.trim() !== ''){
    option.text = select
    inputSelect.add(option,inputSelect[0])
  }
}

这样可以重置下拉列表，然后使用for循环使用输入来构建它。我看到您正在尝试遍历当前下拉列表，并保留输入中仍然存在的值，但这更加快捷方便。

基于表格内容的动态下拉菜单-使用javascript

1 个答案: