如何以编程方式添加下拉列表(< select >) ?

我想创建一个函数,以便以编程方式在页面上添加一些元素。

假设我想添加一个有四个选项的下拉列表:

<select name="drop1" id="Select1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

我该怎么做?

214260 次浏览

This will work (pure JS, appending to a div of id myDiv):

Demo: http://jsfiddle.net/4pwvg/

var myParent = document.body;


//Create array of options to be added
var array = ["Volvo","Saab","Mercades","Audi"];


//Create and append select list
var selectList = document.createElement("select");
selectList.id = "mySelect";
myParent.appendChild(selectList);


//Create and append the options
for (var i = 0; i < array.length; i++) {
var option = document.createElement("option");
option.value = array[i];
option.text = array[i];
selectList.appendChild(option);
}

var sel = document.createElement('select');
sel.name = 'drop1';
sel.id = 'Select1';


var cars = [
"volvo",
"saab",
"mercedes",
"audi"
];


var options_str = "";


cars.forEach( function(car) {
options_str += '<option value="' + car + '">' + car + '</option>';
});


sel.innerHTML = options_str;




window.onload = function() {
document.body.appendChild(sel);
};

I have quickly made a function that can achieve this, it may not be the best way to do this but it simply works and should be cross browser, please also know that i am NOT a expert in JavaScript so any tips are great :)

Pure Javascript Create Element Solution

function createElement(){
var element  = document.createElement(arguments[0]),
text     = arguments[1],
attr     = arguments[2],
append   = arguments[3],
appendTo = arguments[4];


for(var key = 0; key < Object.keys(attr).length ; key++){
var name = Object.keys(attr)[key],
value = attr[name],
tempAttr = document.createAttribute(name);
tempAttr.value = value;
element.setAttributeNode(tempAttr)
}
    

if(append){
for(var _key = 0; _key < append.length; _key++) {
element.appendChild(append[_key]);
}
}


if(text) element.appendChild(document.createTextNode(text));


if(appendTo){
var target = appendTo === 'body' ? document.body : document.getElementById(appendTo);
target.appendChild(element)
}


return element;
}

lets see how we make this

<select name="drop1" id="Select1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

here's how it works

    var options = [
createElement('option', 'Volvo', {value: 'volvo'}),
createElement('option', 'Saab', {value: 'saab'}),
createElement('option', 'Mercedes', {value: 'mercedes'}),
createElement('option', 'Audi', {value: 'audi'})
];




createElement('select', null, // 'select' = name of element to create, null = no text to insert
{id: 'Select1', name: 'drop1'}, // Attributes to attach
[options[0], options[1], options[2], options[3]], // append all 4 elements
'body' // append final element to body - this also takes a element by id without the #
);

this is the params

createElement('tagName', 'Text to Insert', {any: 'attribute', here: 'like', id: 'mainContainer'}, [elements, to, append, to, this, element], 'body || container = where to append this element');

This function would suit if you have to append many element, if there is any way to improve this answer please let me know.

edit:

Here is a working demo

JSFiddle Demo

This can be highly customized to suit your project!

This code would create a select list dynamically. First I create an array with the car names. Second, I create a select element dynamically and assign it to a variable "sEle" and append it to the body of the html document. Then I use a for loop to loop through the array. Third, I dynamically create the option element and assign it to a variable "oEle". Using an if statement, I assign the attributes 'disabled' and 'selected' to the first option element [0] so that it would be selected always and is disabled. I then create a text node array "oTxt" to append the array names and then append the text node to the option element which is later appended to the select element.

var array = ['Select Car', 'Volvo', 'Saab', 'Mervedes', 'Audi'];


var sEle = document.createElement('select');
document.getElementsByTagName('body')[0].appendChild(sEle);


for (var i = 0; i < array.length; ++i) {
var oEle = document.createElement('option');


if (i == 0) {
oEle.setAttribute('disabled', 'disabled');
oEle.setAttribute('selected', 'selected');
} // end of if loop


var oTxt = document.createTextNode(array[i]);
oEle.appendChild(oTxt);


document.getElementsByTagName('select')[0].appendChild(oEle);
} // end of for loop

const cars = ['Volvo', 'Saab', 'Mervedes', 'Audi'];


let domSelect = document.createElement('select');
domSelect.multiple = true;
document.getElementsByTagName('body')[0].appendChild(domSelect);




for (const i in cars) {
let optionSelect = document.createElement('option');


let optText = document.createTextNode(cars[i]);
optionSelect.appendChild(optText);


document.getElementsByTagName('select')[0].appendChild(optionSelect);
}

it's very simple yet tricky but here is what you wanted, hope it's helpful : this function generates a select list from 1990 to 2018 i think this example can help ya, if you want to add any other value just change value of x and y ;)

function dropDown(){
var start = 1990;
var today = 2019;
document.write("<select>");
for (var i = start ; i <= today; i++)
document.write("<option>" + i + "</option>");
}
document.write("</select>");


dropDown();

Here's an ES6 version of the answer provided by 7stud.

const sel = document.createElement('select');
sel.name = 'drop1';
sel.id = 'Select1';


const cars = [
"Volvo",
"Saab",
"Mercedes",
"Audi",
];


const options = cars.map(car => {
const value = car.toLowerCase();
return `<option value="${value}">${car}</option>`;
});


sel.innerHTML = options;


window.onload = () => document.body.appendChild(sel);
const countryResolver = (data = [{}]) => {
const countrySelecter = document.createElement('select');
countrySelecter.className = `custom-select`;
countrySelecter.id = `countrySelect`;
countrySelecter.setAttribute("aria-label", "Example select with button addon");


let opt = document.createElement("option");
opt.text = "Select language";
opt.disabled = true;
countrySelecter.add(opt, null);
let i = 0;
for (let item of data) {
let opt = document.createElement("option");
opt.value = item.Id;
opt.text = `${i++}. ${item.Id} - ${item.Value}(${item.Comment})`;
countrySelecter.add(opt, null);
}
return countrySelecter;
};

Here's an ES6 version, conversion to vanilla JS shouldn't be too hard but I already have jQuery anyways:

function select(options, selected) {
return Object.entries(options).reduce((r, [k, v]) => r.append($('<option>').val(k).text(v)), $('<select>')).val(selected);
}
$('body').append(select({'option1': 'label 1', 'option2': 'label 2'}, 'option2'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>