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

我试图添加和删除下拉菜单<select> s到按钮单击窗体上。这是我目前的代码。我可以发誓我昨晚做了这个工作，但是当我今天早上去我的项目上工作一些时，下拉不会正确添加/删除。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();

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>

来源

2016-03-04 Csw

什么'cookies_drop'？ – Mikey

“正确”是什么意思？你看到什么行为？什么是“cookies_drop”？你正在递增“counter”，但你定义了“this.counter”。此外，dropTest应该是未定义的，因为你没有做“var dropTest = new DropDowns（）;” 事实上，这可能是你搞砸了，但你的计数器逻辑将失败，因为缺少“这个”的 –

对不起，我会澄清问题。 cookies_drop是一个数组。它是在php页面声明的，使用json_encode将php数组“转换”为cookies_drop。 cookies_drop数组当前正确填充。我看到的行为是，当我点击“添加cookie”按钮时，没有新的下拉列表被添加到表单中。感谢您指出“this.counter”问题，我将更新我的代码并查看它是如何发生的。 – Csw

我只能找出主要问题可能是在服务器端，当你创建一个使用json_encode的cookies_drop变量。

其他的问题可能存在于：

上addDropdown函数的参数的测试建议，以检查它是否有效
在remDropdown计数器变量的递减函数，如果必须只完成元素实际上被删除
你混合了jQuery和javaScript
不是直接使用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>

来源

2016-05-19 13:31:06 gaetanoM

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

回答

相关问题