Come aggiungere un elenco a discesa () a livello di codice?

Voglio creare una funzione per aggiungere alcuni elementi in modo programmatico su una pagina.

Diciamo che voglio aggiungere un elenco a discesa con quattro opzioni:

 Volvo Saab Mercedes Audi  

Come lo posso fare?

Funzionerà (JS puro, aggiungendo un div di 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); } 

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

 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 += ''; }); sel.innerHTML = options_str; window.onload = function() { document.body.appendChild(sel); }; 

Ho rapidamente creato una funzione che può raggiungere questo objective, potrebbe non essere il modo migliore per farlo ma funziona semplicemente e dovrebbe essere cross browser, per favore sappiate anche che NON sono un esperto in JavaScript quindi qualsiasi consiglio è fantastico 🙂

Javascript puro Crea soluzione elemento

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

vediamo come lo facciamo

  

Ecco come funziona

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

questo è il 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'); 

Questa funzione si adatterebbe se dovessi aggiungere molti elementi, se c'è un modo per migliorare questa risposta per favore fammi sapere.

modificare:

Ecco una demo funzionante

JSFiddle Demo

Questo può essere altamente personalizzato per soddisfare il tuo progetto!

Questo codice creerebbe dynamicmente un elenco di selezione. Per prima cosa creo un array con i nomi delle auto. Secondo, creo dynamicmente un elemento select e lo assegno ad una variabile “sEle” e lo aggiungo al corpo del documento html. Quindi io uso un ciclo for per fare un ciclo attraverso l’array. In terzo luogo, creo dynamicmente l’elemento opzione e lo assegno a una variabile “oEle”. Usando un’istruzione if, assegno gli attributi ‘disabled’ e ‘selected’ al primo elemento opzione [0] in modo che sia selezionato sempre e sia disabilitato. Creo quindi un array di nodes di testo “oTxt” per aggiungere i nomi degli array e quindi aggiungere il nodo di testo all’elemento opzione che viene successivamente aggiunto all’elemento select.

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

è molto semplice ma complicato ma ecco quello che volevi, spero sia utile: questa funzione genera una lista di selezione dal 1990 al 2018 penso che questo esempio possa aiutarti, se vuoi aggiungere qualsiasi altro valore cambia solo il valore di xey; )

 function test(){ var x = 1990; var y = 2018; document.write(""); test();