Dynamisch setzen Auswahl-Optionen mit JavaScript

Question

Wie kann ich die Optionen aus meinem HTML-Select-Feld mit Javascript dynamisch einstellen? Dies ist meine Seite einrichten:

<form name="test"> 
    <table> 
    <tr> 
     <td class='dataleft'>Product: </td> 
     <td><select name='inptProduct'></select></td> 
    </tr> 
    </table> 
</form> 

ich alle Werte in einem Array haben. Hier können Sie die <option> s einstellen.

for(var i = 0; i < productArray.length; i++) { 
    console.log("<option value='" + productArray[i] + "'>" + productArray[i] + "</option>"); 
} 

PS: jQuery kann verwendet werden.

---

Lösung: Dies ist die letzte Lösung, die ich suchte. Die neuen Optionen werden nicht auf das Auswahlfeld angewendet. Es entfernt alle zuerst, und fügt dann die neuen:

var optionsAsString = ""; 
for(var i = 0; i < productArray.length; i++) { 
    optionsAsString += "<option value='" + productArray[i] + "'>" + productArray[i] + "</option>"; 
} 
$("select[name='inptProduct']").find('option').remove().end().append($(optionsAsString)); 

Answer 1

wellyou haben es fast geschafft alles:

var optionsAsString = ""; 
for(var i = 0; i < productArray.length; i++) { 
    optionsAsString += "<option value='" + productArray[i] + "'>" + productArray[i] + "</option>"; 
} 
$('select[name="inptProduct"]').append(optionsAsString); 

EDIT entfernt $ Wrapper um letzte optionsAsString als append automatisch Strings konvertiert

Answer 2

var $inputProduct = $("select[name='inputProduct']") 

$(productArray).each(function(i, v){ 
    $inputProduct.append($("<option>", { value: v, html: v })); 
}); 

Answer 3

Sie können ID für die Auswahl id = inptProduct Dann tun $ ('#inptProduct'). Val (yourselectValue)

Answer 4

function onLoad() { 

    var type = new Array("Saab","Volvo","BMW"); 

    var $select = $("select[name='XXXXXType']") 
    alert($select); 
    $(type).each(function(i, v){ 
     $select.append($("<option>", { value: v, html: v })); 
     }); 

} 

<select name="XXXXXType" id="XXXXXType"></select> 

Answer 5

Unter der Annahme, dass das Array productArray ist eine einfache Anordnung, wobei jedes Element der Wert der Option zu sein, und der gewünschte Titel für diese Option .

$('select[name="inptProduct"]') 
    .html('<option>' + productArray.join('</option><option>') + '</option>'); 

Beispiel:

productArray = ['One', 'Two', 'Three']; 

// With the original code being 

<select name="inptProduct"> 
    <option>There could be no options here</option> 
    <option>Otherwise, any options here will be overwritten</option> 
</select> 

// Running the code above would output 

<select name="inptProduct"> 
    <option>One</option> 
    <option>Two</option> 
    <option>Three</option> 
</select> 

Answer 6

Wenn Sie nicht für reine JavaScript beharren die Arbeit zu tun, können Sie den Job mit jQuery leicht getan.

<form name="test"> 
    <table> 
    <tr> 
     <td class='dataleft'>Product: </td> 
     <td><select id='inptProduct'></select></td> 
    </tr> 
    </table> 
</form> 


for (var i = 0; i < productArray.length; i++) { 
    $("#inptProduct").append('<option value=' + if_you_want_set_value + '>' + productArray[i] + '</option>'); 
    } 

Bitte beachte, dass ich hier die ID des select-Tag verwendet. Deshalb füge ich auch den HTML-Teil hinzu. Ich hoffe, Sie wissen, wie man jQuery hinzufügt.

Answer 7

Ich mache es in der Regel wie folgt aus:

document.getElementById("selectid").innerHTML="<option value='foo'>FOO</option>";