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函數生成下拉菜單/刪除下拉菜單

回答

相關問題