Dynamicznie ustaw opcje select z JavaScript

Question

Jak mogę dynamicznie ustawić opcje z mojego pola wyboru html przy pomocy Javascript? To jest moje ustawienia strony:

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

mam wszystkie wartości w tablicy. To jest miejsce, w którym można ustawić s. <option>.

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

PS: jQuery może być używany.

---

Rozwiązanie: Jest to ostateczne rozwiązanie szukałem. Nie stosuje nowych opcji do pola wyboru. Usuwa wszystko, a potem dodaje nowe:

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 prawie zrobić wszystko:

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

EDIT usunięte $ owijkę wokół ostatni optionsAsString jak append automatycznie konwertuje ciągi

Answer 2

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

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

Answer 3

możesz ustawić identyfikator dla wyboru id = inptProduct Następnie wykonaj $ („#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

Zakładając, że tablica productArray jest prostą macierz, a każdy element jest wartością opcji, a w tytule o takiej możliwości .

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

Przykład:

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

Jeśli nie nalegając na czystym JavaScript, aby wykonać zadanie, można łatwo wykonać zadanie za pomocą jQuery.

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

Zauważ, że tutaj użyłem id znacznika select. Dlatego też dodam część html. Mam nadzieję, że wiesz, jak dodać jQuery.

Answer 7

zwykle zrobić to tak:

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