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

我试图通过单击按钮将下拉列表添加到表单并将其删除。这是我目前拥有的代码。我可以发誓我昨晚已经完成了，但是当我今天早上去做更多的项目时，下拉列表无法正确添加/删除

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

函数下拉列表（）{
这个计数器=0；
this.addDropdown=函数（divname）{
var newDiv=document.createElement（'div'）；
var html=''，i；
对于（i=0；i

HTML:

添加饼干
删除cookie

当您使用json编码创建cookies\u drop变量时，我只能找出服务器端可能存在的主要问题

其他问题可能存在于：

建议对addDropdown函数的参数进行测试，以检查其是否有效

在函数remDropdown中，只有在实际删除元素时，才必须减小计数器变量

您混合了jQuery和javaScript

使用innerHTML属性，而不是直接使用createElement，使代码更简单、更可读

因此，我的代码片段是：

//我假设您使用了如下内容：
//var cookies_drop=JSON.parse（“”）；
var cookies_drop=[{text:“Text1”，val:“Value1”}，
{text:“Text2”，val:“Value2”}，
{text:“Text3”，val:“Value3”}]；
函数下拉列表（）{
这个计数器=0；
this.addDropdown=函数（divname）{
var divEle=document.querySelectorAll（'form[id='+divname+']）；
如果（divEle.length！=1）{
return；//错误
}
var newDiv=document.createElement（'div'）；
var newSelect=document.createElement（'select'）；
newSelect.name='cookie'+this.counter；
newDiv.appendChild（newSelect）；
对于（变量i=0；i

添加饼干
删除cookie
什么是
cookies\u drop
？你说的“正确”是什么意思？你看到了什么行为？什么是“饼干”？您正在递增“counter”，但定义了“this.counter”。此外，dropTest应该是未定义的，因为您没有执行“var dropTest=new DropDowns（）；”事实上，可能是缺少的“new”把您搞砸了，但是您的计数器逻辑将失败，因为缺少了“this”，我将澄清这些问题。cookies\u drop是一个数组。它在php页面上声明，其中php数组使用json编码“转换”为cookies\u drop。cookies\u drop数组当前已正确填充。我看到的行为是，当我单击“添加cookie”按钮时，没有新的下拉列表添加到表单中。感谢您指出“this.counter”问题，我将更新我的代码，看看它是如何运行的。我已经添加了建议的更改，并在OP中更新了代码。结果是一样的，单击“添加cookie”按钮仍然不会添加新的下拉列表。@Csw那么您解决问题了吗？
<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>