Come posso fornire un array come opzioni per selezionare l'elemento?

Ho un elemento select sulla mia pagina HTML. Voglio popolarlo con un array. come possiamo dare un array come dataprovider a comboBox nello script di azione. Faccio il seguenteCome posso fornire un array come opzioni per selezionare l'elemento?

in HTML ...

<table> 
    <tr> 
    <td> 
     <label>Recording Mode:</label> 
    </td> 
    <td> 
     <select id="rec_mode">   
     </select> 
    </td> 
    </tr> 
</table>

in javascript ...

var videoSrcArr = new Array("option1", "option2", "option3", "option4", "option5");

come posso compilare elemento rec_mode quando la pagina viene caricata con VideoSrcArr? Grazie

fonte

2013-01-23 Sarfraz Ahmed

Possibile duplicato di [JavaScript - popola elenco a discesa con array] (http://stackoverflow.com/questions/9895082/javascript-populate-drop-down-list-with -array) (e varie altre domande). – nnnnnn

mi raccomando si utilizza un formato simile al seguente:

var options = 
[ 
    { 
    "text" : "Option 1", 
    "value" : "Value 1" 
    }, 
    { 
    "text"  : "Option 2", 
    "value" : "Value 2", 
    "selected" : true 
    }, 
    { 
    "text" : "Option 3", 
    "value" : "Value 3" 
    } 
]; 

var selectBox = document.getElementById('rec_mode'); 

for(var i = 0, l = options.length; i < l; i++){ 
    var option = options[i]; 
    selectBox.options.add(new Option(option.text, option.value, option.selected)); 
}

Non correre per il problema di dover selezionare un'opzione predefinita e si può facilmente generare la matrice opzioni dinamicamente .

- AGGIORNAMENTO -

ES6 versione del codice di cui sopra:

let optionList = document.getElementById('rec_mode').options; 
let options = [ 
    { 
    text: 'Option 1', 
    value: 'Value 1' 
    }, 
    { 
    text: 'Option 2', 
    value: 'Value 2', 
    selected: true 
    }, 
    { 
    text: 'Option 3', 
    value: 'Value 3' 
    } 
]; 

options.forEach(option => 
    optionList.add(
    new Option(option.text, option.value, option.selected) 
) 
);

fonte

2013-01-23 06:19:54 THEtheChad

Come ottenere il valore di selezione? –

Dato che è l'aggiornamento ES6, forse rimuova 'var'. Sostituisci con' let'? – VisWebsoft

Buona chiamata @VisWebsoft – THEtheChad

Si consiglia di utilizzare l'oggetto invece di matrice sarà di grande aiuto e in modo rispettato con gli standard. Il motivo è che possiamo indicizzare l'oggetto con la "chiave" e ottenere il "valore". Per visualizzare il contenuto e il ripristino è possibile seguire questa NOTES

CHECK HERE

<!DOCTYPE html> 
<html> 
<body> 
<table> 
    <tr> 
    <td> 
     <label>Recording Mode:</label> 
    </td> 
    <td> 
     <select id="rec_mode">   
     </select> 
    </td> 
    </tr> 
</table> 
</body> 
<script> 
var myobject = { 
    ValueA : 'Text A', 
    ValueB : 'Text B', 
    ValueC : 'Text C' 
}; 
var select = document.getElementById("rec_mode"); 
for(index in myobject) { 
    select.options[select.options.length] = new Option(myobject[index], index); 
} 

</script> 
</html>

fonte

2013-01-23 05:54:44

Si può fare questo:

var videoSrcArr = new Array("option1","option2","option3","option4","option5"), 
    selectEl = document.getElementById('rec_mode'); 


for(var i = 0; i < videoSrcArr.length; i++){ 
    selectEl.options.add(new Option(videoSrcArr[i], videoSrcArr[i])); 
}

fonte

2013-01-23 05:55:08 dmk

- meglio usare un array letterale rispetto al costruttore di array poichè è meno da digitare e meno probabile che faccia cose inaspettate (es. 'Nuovo Array (9)' vs '[9]'. – RobG

Questo è il modo più semplice per popolare ComboBox con una matrice.

var j = new Array("option1","option2","option3","option4","option5"),  
var options = ''; 

for (var i = 0; i < j.length; i++) { 
    options += '<option value="' + j[i]+ '">' + j[i] + '</option>'; 
} 
$("#rec_mode").html(options);

fonte

2013-01-23 06:14:45 JDev

Questo è il modo migliore è possibile ottenere valori di array nella casella combinata

var states = new Array(); 
 
states['India'] = new Array('Andhra Pradesh','Arunachal Pradesh','Assam','Bihar','Chhattisgarh','Goa','Gujarat','Haryana','Himachal Pradesh','Jammu and Kashmir','Jharkhand','Karnataka','Kerala','Madhya Pradesh','Maharashtra','Manipur','Meghalaya','Mizoram','Nagaland','Odisha','Punjab','Rajasthan','Sikkim','Tamil Nadu','Telangana','Tripura','Uttar Pradesh','Uttarakhand','WestBengal','Andaman and Nicobar Islands','Chandigarh','Dadra and Nagar Haveli','Daman and Diu','Lakshadweep','Puducherry'); 
 

 
function setStates() { 
 
\t var newOptions=states['India']; 
 
\t var newValues=states['India']; 
 
\t selectField = document.getElementById("state"); 
 
\t selectField.options.length = 0; 
 
\t for (i=0; i<newOptions.length; i++) 
 
\t { 
 
\t selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]); 
 
\t } 
 
}

<body onload="setStates();" 
 
<label>State :</label> 
 
<select style="width:auto;" name="state" id="state"> 
 
<option value="">Please select a Country</option> 
 
</select><br>

fonte

2015-08-03 17:00:44 Parul

Come posso fornire un array come opzioni per selezionare l'elemento?

risposta

Problemi correlati