用于生成下拉菜单/删除下拉菜单的JavaScript函数

Question

我试图<select>在按钮单击上添加和删​​除下拉列表到表单.这是我目前的代码.我可以发誓我昨晚有这个工作,但是当我今天早上在我的项目上工作时,下拉菜单不会正确添加/删除.

function DropDowns(){
    this.counter = 0;
    this.addDropdown = function (divname) {
        var newDiv = document.createElement('div');
        var html = '<select name="cookie' + this.counter + '">', i;

        for (i = 0; i < cookies_drop.length; i++) {
           html += "<option value='" + cookies_drop[i] + "'>" + cookies_drop[i] + "</option>"
        }
        html += '</select>';
        newDiv.innerHTML = html;
        document.getElementById(divname).appendChild(newDiv);

        this.counter++;
    }

    this.remDropdown = function() {
        $('#dropdowns-container').find('div:last').remove();
        this.counter--;
    }
}

var dropsTest = new DropDowns();

HTML:

<form action='' method=post id="dropdowns-container">

    <button id="add_cookie" type="button" onclick="dropsTest.addDropdown('dropdowns-container');">add cookie</button>
    <button id="rem_cookie" type="button" onclick="dropsTest.remDropdown();">remove cookie</button>

<input name="cookies" type=submit value="submit">

</form>

Answer 1

当您使用 json_encode 创建 cookies_drop 变量时，我只能弄清楚主要问题可能出现在服务器端。

其他问题可能存在于：

1. 建议测试一下addDropdown函数的参数是否有效
2. 在函数 remDropdown 中，仅当元素实际被删除时才必须执行计数器变量的递减
3. 你混合了 jQuery 和 JavaScript
4. 您没有直接使用 createElement，而是使用了 innerHTML 属性，从而使代码更加简单和可读。

所以，我的片段是：

// I assume you used something like:
// var cookies_drop = JSON.parse( '<?php echo json_encode($data) ?>' );

var cookies_drop = [{text: "Text1", val: "Value1"},
                    {text: "Text2", val: "Value2"},
                    {text: "Text3", val: "Value3"}];

function DropDowns() {
  this.counter = 0;
  this.addDropdown = function (divname) {
    var divEle = document.querySelectorAll('form[id=' + divname + ']');
    if (divEle.length != 1) {
      return; // error
    }

    var newDiv = document.createElement('div');

    var newSelect = document.createElement('select');
    newSelect.name = 'cookie' + this.counter;
    newDiv.appendChild(newSelect);

    for (var i = 0; i < cookies_drop.length; i++) {
      var newOption = document.createElement('option');
      newOption.value = cookies_drop[i].val;
      newOption.text = cookies_drop[i].text;
      newSelect.appendChild(newOption);
    }
    divEle[0].appendChild(newDiv);
    this.counter++;
  }

  this.remDropdown = function () {
    var lastDiv = document.querySelectorAll('#dropdowns-container div:last-child');
    if (lastDiv.length == 1) {
      lastDiv[0].parentNode.removeChild(lastDiv[0]);
      this.counter--;
    }
  }
}
var dropsTest = new DropDowns();

<form action="" method="post" id="dropdowns-container">
    <button id="add_cookie" type="button" onclick="dropsTest.addDropdown('dropdowns-container');">add cookie</button>
    <button id="rem_cookie" type="button" onclick="dropsTest.remDropdown();">remove cookie</button>
    <input name="cookies" type=submit value="submit">
</form>