使用按鈕創建新的下拉列表

Question

因此，我有這段代碼可以創建新的文本區域，我希望有人可以向我展示如何更改代碼，從而創建一個新的下拉列表。 列表的內容在每個框中都相同。

我認為這是對javascript進行一些小的更改的情況。

JAVASCRIPT

        var counter = 0;

  function addNew() {

// Get the main Div in which all the other divs will be added
var mainContainer = document.getElementById('mainContainer');

// Create a new div for holding text and button input elements
var newDiv = document.createElement('div');

// Create a new text input
var newText = document.createElement('input');
newText.type = "text"; 

//for testing
newText.value = counter++;

// Create buttons for creating and removing inputs
var newAddButton = document.createElement('input');
newAddButton.type = "button";
newAddButton.value = " + ";

var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = " - ";

// Append new text input to the newDiv
newDiv.appendChild(newText);

// Append new button inputs to the newDiv
newDiv.appendChild(newAddButton);
newDiv.appendChild(newDelButton);

// Append newDiv input to the mainContainer div
mainContainer.appendChild(newDiv);

// Add a handler to button for deleting the newDiv from the mainContainer
newAddButton.onclick = addNew;

newDelButton.onclick = function() {
        mainContainer.removeChild(newDiv);
 };
}

HTML

             <select name="text">
                <option value="t1">t1</option>
                <option value="t2">t2</option>
                <option value="t3">t3</option>
              </select>
              <input type="button" value=" + " onClick="addNew();">
            </div>

Answer 1

很好的問題，這是一個解決方案，您可以根據現有代碼輕松實現。

代替（現有代碼的一部分）：

// Create a new text input
var newText = document.createElement('input');
newText.type = "text"; 

//for testing
newText.value = counter++;

// Append new text input to the newDiv
newDiv.appendChild(newText);

采用：

// create dropdown element and one option element
var newDropdown = document.createElement('select'),
    newDropdownOption = document.createElement("option");

// assign 'value' and 'text' properties to the option element   
newDropdownOption.value = "value1";
newDropdownOption.text = "option 1";

// add the option to the dropdown DOM node
newDropdown.add(newDropdownOption);

// add dropdown to mainContainer
newDiv.appendChild(newDropdown);

希望有幫助！

編輯：這是完整的工作代碼。 您應該可以從這里拿走它！

function addNew() {

            // Get the main Div in which all the other divs will be added
            var mainContainer = document.getElementById('mainContainer');

            // Create a new div for holding text and button input elements
            var newDiv = document.createElement('div');

            // Create a new text input
            var newDropdown = document.createElement('select');

            newDropdownOption = document.createElement("option");
            newDropdownOption.value = "value1";
            newDropdownOption.text = "option 1";

            newDropdown.add(newDropdownOption);

            // Create buttons for creating and removing inputs
            var newAddButton = document.createElement('input');
            newAddButton.type = "button";
            newAddButton.value = " + ";

            var newDelButton = document.createElement('input');
            newDelButton.type = "button";
            newDelButton.value = " - ";

            // Append new text input to the newDiv
            newDiv.appendChild(newDropdown);

            // Append new button inputs to the newDiv
            newDiv.appendChild(newAddButton);
            newDiv.appendChild(newDelButton);

            // Append newDiv input to the mainContainer div
            mainContainer.appendChild(newDiv);

            // Add a handler to button for deleting the newDiv from the mainContainer
            newAddButton.onclick = addNew;

            newDelButton.onclick = function() {
                    mainContainer.removeChild(newDiv);
            };
        }

添加HTML：我已經不再使用您提供的HTML，因此應該可以正常工作。

<div id="mainContainer">
    <select name="text">
        <option value="t1">t1</option>
        <option value="t2">t2</option>
        <option value="t3">t3</option>
    </select>
    <input type="button" value=" + " onClick="addNew();">
</div>