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变量时服务器端可能存在的主要问题。

其他问题可能在于：

建议对addDropdown函数的参数进行测试以检查它是否有效
在函数remDropdown中，只有在实际删除元素时才必须完成计数器变量的减量
你混合了jQuery和javaScript
您使用innerHTML属性，而不是直接使用createElement，使代码更简单，更易读。

所以，我的代码片段是：

Resources.getSystem().getString(R.strings.key)

// 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();

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

1 个答案: