Wie kann ich ein Array als Optionen angeben, um ein Element auszuwählen?

Ich habe ein Select-Element auf meiner HTML-Seite. Ich möchte es mit einem Array füllen. wie wir ein Array als Datenprovider zu ComboBox in Aktionsskript geben können. Ich tue das folgendeWie kann ich ein Array als Optionen angeben, um ein Element auszuwählen?

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

wie kann ich rec_mode Element füllen, wenn die Seite mit VideoSrcArr geladen wird? Danke

Quelle

2013-01-23 Sarfraz Ahmed

Mögliche bekommen Duplikat von [JavaScript - Popup-Dropdown-Liste mit Array] (http://stackoverflow.com/questions/9895082/javascript-populate-drop-down-list-with -array) (und verschiedene andere Fragen). – nnnnnn

empfehle ich Ihnen ein Format wie der Verwendung folgende:

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

Sie führen in nicht auf das Problem der eine Standardoption auswählen zu müssen und Sie können die Optionen Array dynamisch leicht erzeugen .

- UPDATE -

ES6 Version des obigen Code:

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

Quelle

2013-01-23 06:19:54 THEtheChad

Wie erhalten Sie einen Wert? –

Seit diesem ist ES6 Update, vielleicht entfernen Sie 'var' Ersetzen Sie mit' let'? – VisWebsoft

Guten Ruf @VisWebsoft – THEtheChad

Ich würde empfehlen, Objekt anstelle von Array zu verwenden, wird es von großer hilfreich sein und in respektierter Weise mit Standards. Der Grund dafür ist, dass WIR mit dem "Schlüssel" in das Objekt indizieren kann und den "Wert" erhalten kann. Um Inhalte anzuzeigen und das Zurücksetzen können Sie diese folgen 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>

Quelle

2013-01-23 05:54:44

Sie können dies tun:

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

Quelle

2013-01-23 05:55:08 dmk

-besser, ein Array-Literal als der Array-Konstruktor zu verwenden, da es weniger zu tippen und weniger wahrscheinlich ist, unerwartete Dinge zu tun (zB 'neues Array (9)' vs '[9]'. – RobG

Dies ist die einfachste Art und Weise comboBox mit einem Array zu füllen.

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

Quelle

2013-01-23 06:14:45 JDev

Dies ist die beste Art und Weise Sie Array-Werte in Kombinationsfeld

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>

Quelle

2015-08-03 17:00:44 Parul

Wie kann ich ein Array als Optionen angeben, um ein Element auszuwählen?

Antwort

Verwandte Themen