Açılır menüleri oluşturmak/açılan menüleri kaldırmak için JavaScript işlevi

Question

Tek bir tıklamayla bir form açılır kapanır <select> s eklemek ve kaldırmak için çalışıyorum. Şu an sahip olduğum kod. Yemin ederim dün gece çalışmıştım, ama bu sabah projemde biraz daha çalışmaya gittiğimde, açılanlar doğru bir şekilde eklenemez/kaldırılamazdı.

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

Ben sadece json_encode kullanarak cookies_drop değişkeni oluştururken sunucu tarafında olabilir ana sorunu anlamaya olabilir. o

geçerli olmadığını addDropdown işlevinin parametre üzerinde bir test önerilir

1. keşke yapılmalıdır sayaç değişkeninin eksiltme remDropdown fonksiyonunda kontrol etmek:

   Diğer sorunlar ikamet edebilir Öğe gerçekten kaldırıldı

2. jQuery ve javaScript
3. 'u karıştırdınız. Doğrudan createElement öğesini kullanmak yerine, kodu daha basit ve okunabilir hale getirmek için innerHTML özelliğini kullandınız.

Yani benim snippet'tir:

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