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

Creating new dropdown lists with a button

本文关键字：下拉列表 创建 按钮      更新时间：2024-02-02

所以我有这个代码可以创建新的文本区域，我希望有人能告诉我如何更改代码，这样它就可以创建一个新的下拉列表。每个框中的列表内容都是相同的。

我认为这只是对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>

好问题，这里有一个解决方案，您可以在现有代码的情况下很容易地实现。

代替（您现有代码的一部分）：

// 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>
相关文章：