Question

Come posso impostare dinamicamente le opzioni dal mio campo di selezione html con Javascript? Questa è la mia impostazione della pagina:

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

Ho tutti i valori in un array. Questa è la posizione per impostare il numero <option> s.

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

PS: jQuery può essere utilizzato.

---

Soluzione: Questa è la soluzione finale che cercavo. Non applica le nuove opzioni al campo di selezione. Rimuove tutti di prima, e poi aggiunge quelli nuovi:

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 hanno quasi fatto tutto:

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

EDIT rimosso $ wrapper ultima optionsAsString come append converte automaticamente le stringhe

Answer 2

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

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

Answer 3

è possibile impostare l'id per l'id selezionato = inptProdotto Quindi fare $ ('#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

Supponendo che la matrice è una matrice productArray semplice, con ciascun elemento essendo il valore dell'opzione, e il titolo desiderato per tale opzione .

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

Esempio:

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

Se non insistere per puro JavaScript per fare il lavoro, si può facilmente fatto il lavoro utilizzando 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>'); 
    } 

Si noti che qui ho utilizzato l'id del tag select. Ecco perché aggiungo anche la parte html. Spero tu sappia come aggiungere jQuery.

Answer 7

faccio di solito in questo modo:

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