¿Cómo configurar las opciones de un menú desplegable usando Javascript/jQuery?

1 minuto de lectura

Avatar de usuario de Joey Morani
joey morani

¿Alguien sabe cómo configurar las opciones y los valores de un menú desplegable usando javascript o jquery? Estoy usando este HTML:

<select size="1" id="D1">
</select>

Gracias por la ayuda.

  • ¿Qué quieres decir con ‘establecer las opciones’? Esto es ambiguo.

    – Wes Cuervo

    28 de diciembre de 2011 a las 21:09

Avatar de usuario de Purag
Purag

Ni siquiera necesita necesariamente jQuery:

var select = document.getElementById("D1"),
    opt = document.createElement("option");
opt.value = "value";
opt.textContent = "text to be displayed";
select.appendChild(opt);

Ejemplo.

Pero aquí está con jQuery de todos modos:

$("select#D1").append( $("<option>")
    .val("value")
    .html("text to be displayed")
);

Ejemplo.

  • Creo que hay un error tipográfico en esta línea. .html("text to be displayed"); quita el punto y coma al final. Debería ser .html("text to be displayed").

    – Sivakumar

    27/04/2015 a las 13:50

  • @Sivakumar Wow, casi 4 años y pasó desapercibido… arreglado. ¡Gracias por mencionar eso! jajaja

    – Purag

    28 de abril de 2015 a las 2:30

Avatar de usuario de Andrew Whitaker
Andrew Whitaker

Otra forma más de hacerlo, usando select‘s añadir método:

var select = $("#select")[0];

select.add(new Option("one", 1));
select.add(new Option("two", 2));
select.add(new Option("three", 3));

Ejemplo: http://jsfiddle.net/pc9Dz/

O de otra manera, asignando valores directamente a los select‘s options recopilación:

var select = $("#select")[0];

select.options[0] = new Option("one", 1);
select.options[1] = new Option("two", 2);

Hay algunas formas diferentes. Uno es:

$("#D1").append("<option>Fred</option>");

Aquí hay otra forma de eliminar opciones usando javascript (similar a la respuesta de Andrew Whitaker) usando la matriz de opciones:

var select = document.getElementById("D1");
select.options.length = 0;//remove all options

$("#dropdown").html("<option value="val1">label 1</option><option value="val2" selected='selected'>label 2</option>");

¿Ha sido útil esta solución?