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>

使用按钮创建新的下拉列表

1 个答案: