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>

- Csw

---

cookies_drop是什么？ - Mikey

“正确”是什么意思？您看到了什么行为？“cookies_drop”是什么？您正在递增“counter”，但您定义了“this.counter”。此外，dropTest应该未定义，因为您没有执行“var dropTest = new DropDowns();”实际上，可能是缺少“new”导致问题出现，但由于缺少“this”，您的计数器逻辑将失败。 - Ray Wadkins

@RayWadkins JSFiddle需要jQuery才能使删除按钮正常工作。 - Emil

@Emil 是的，我在放链接之后注意到了这一点。 - Ray Wadkins

@Csw，你解决了问题吗？ - ErTR

Answer 1

我只能想到一个主要问题，可能是在使用json_encode创建cookies_drop变量时出现了服务器端的问题。

其他问题可能包括：

1. 建议对addDropdown函数的参数进行测试以检查其是否有效
2. 在remDropdown函数中，只有在实际删除元素时才应该减少计数器变量
3. 您混合使用了jQuery和JavaScript
4. 您使用innerHTML属性而不是直接使用createElement，这使得代码更简单易读。

因此，我的片段是：

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

- gaetanoM