ドロップダウンを生成するJavaScript関数/ドロップダウンメニュー

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機能で

有効だかどうかを確認することが示唆され

1. ：

   他の問題は、中に存在することができます要素が実際に削除されました

2. jQueryとjavaScriptが混在した
3. 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>