javascript - opciones - ¿Cómo agregar la lista desplegable(<seleccionar>) programáticamente?

php lista desplegable dinamica

Question

Quiero crear una función para agregar elementos de una página por medio de una programación.

Digamos que quiero agregar una lista desplegable con cuatro opciones:

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

¿Cómo puedo hacer eso?

Answer 1

Este código crearía una lista de selección de forma dinámica. Primero creo una matriz con los nombres de los automóviles. En segundo lugar, creo dinámicamente un elemento de selección y lo asigno a una variable "sEle" y lo adjunto al cuerpo del documento html. Luego utilizo un bucle for para recorrer la matriz. En tercer lugar, creo dinámicamente el elemento de opción y lo asigno a una variable "oEle". Utilizando una declaración if, asigno los atributos ''disabled'' y ''selected'' al primer elemento de opción [0] para que se seleccione siempre y esté desactivado. Luego creo una matriz de nodos de texto "oTxt" para anexar los nombres de la matriz y luego anexar el nodo de texto al elemento de opción que luego se agrega al elemento de selección.

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

Answer 2

Esto funcionará (JS puro, que se agrega a un div de id myDiv ):

var myDiv = document.getElementById("myDiv");
//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";
myDiv.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);
}

Demostración: http://jsfiddle.net/4pwvg/

Answer 3

Rápidamente he hecho una función que puede lograr esto, puede que no sea la mejor manera de hacerlo, pero simplemente funciona y debe ser un navegador cruzado, también sé que NO soy un experto en JavaScript, así que cualquier consejo es genial :)

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;
}

veamos cómo hacemos esto

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

Así es como funciona

 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 #
);

este es el 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'');

Esta función sería adecuada si tiene que agregar muchos elementos, si hay alguna forma de mejorar esta respuesta, por favor hágamelo saber.

editar:

Aquí hay una demostración funcional

Demostración de JSFiddle

¡Esto puede ser altamente personalizado para adaptarse a su proyecto!

Answer 4

es muy simple pero complicado, pero esto es lo que quería, espero que sea útil: esta función genera una lista de selección de 1990 a 2018, creo que este ejemplo puede ayudarlo, si desea agregar cualquier otro valor, simplemente cambie el valor de xey; )

function test(){
var x = 1990;
var y = 2018;
document.write("<select>");
for (var i = x; i <= y; i++)
document.write("<option>" + i + "</option>");
}
document.write("</select>");
test();

Answer 5

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);
}

Answer 6

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);
};