JavaScript function to create drop-down menus / remove drop-down menus

Question

I am trying to add and remove a <select> drop-down menu in a form by clicking a button. This is the code I have. I could swear that I had this work last night, but when I worked on my project this morning, the drop-down menus will not add / remove correctly.

 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

I can only figure out what the main problem can be on the server side when you create the cook_drop variable using json_encode.

Other problems may be in:

• It is recommended that you check the addDropdown parameter to see if it is valid
• In the remDropdown function, the decrement of the counter variable should be executed only if the element is actually deleted.
• You mixed jQuery and javaScript
• Instead of using createElement directly, making the code simpler and more readable, you used the innerHTML property.

So my snippet:

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