Opciones de selección configuradas dinámicamente con JavaScript

¿Cómo puedo establecer dinámicamente las opciones de mi campo de selección html con Javascript? Esta es mi configuración de página:Opciones de selección configuradas dinámicamente con JavaScript

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

tengo todos los valores en una matriz. Esta es la ubicación para establecer el <option> s.

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

PS: jQuery se puede utilizar.

Solución: Esta es la solución final que estaba buscando. No aplica las nuevas opciones al campo de selección. Se elimina todo el primero, y luego añade los nuevos:

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

Fuente

2012-04-20 doonot

http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery –

http://stackoverflow.com/questions/47824/how-do-you-remove-all-the-options-of-a-select-box-and-then-add-one-option-and-se – AbiusX

wellyou casi han hecho de todo:

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

EDITAR retirado $ envoltura alrededor última optionsAsString como append convierte automáticamente las cadenas

Fuente

2012-04-20 13:43:07 gotofritz

+1 pegaría de nuevo en mi base de código – vemv

@vemv * otra vez * - tal vez sea hora de crear una función que haga esto – csharpfolk

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

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

Fuente

2012-04-20 13:42:12 hunter

esto funcionará, pero agregar las opciones de una vez es más eficiente. No es que importe si es solo un menú desplegable en una página. – gotofritz

¿Qué te hace pensar que esto no hace eso? – hunter

está ejecutando .append para cada miembro del producto Array – gotofritz

-5

puede establecer la identificación para la id seleccionada = inptProduct Entonces haga $ ('#inptProduct'). Val (yourselectValue)

Fuente

2012-04-20 13:43:10 ZERO

Primero que nada, no necesita configurar la identificación para acceder a un nodo, en segundo lugar val hace algo completamente diferente. – gotofritz

.val() configurará el valor seleccionado del elemento de selección. – Joe

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>

Fuente

2013-07-30 11:04:15

no funciona en la aplicación móvil –

Suponiendo que la matriz productArray es una matriz simple, con cada elemento siendo el valor de la opción, y el título deseado para esa opción .

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

Ejemplo:

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>

Fuente

2016-02-17 17:19:21

Si no insistir durante JavaScript puro para hacer el trabajo, usted puede hacer fácilmente el trabajo utilizando 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>'); 
    }

Tenga en cuenta que aquí utilicé la identificación de la etiqueta de selección. Es por eso que agrego la parte html también. Espero que sepas cómo agregar jQuery.

Fuente

2016-05-12 09:33:24

por lo general lo hago de esta manera:

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

Fuente

2017-08-22 12:03:35 Radacina

Opciones de selección configuradas dinámicamente con JavaScript

Respuesta

Cuestiones relacionadas