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

Question

¿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.

Answer 1

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

Example.

pero aquí está de todos modos con jQuery:

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

Example.

Answer 2

Hay algunas maneras diferentes. Una de ellas es:

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

Answer 3

Sin embargo, otra manera de hacerlo, usando select 's add method:

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, mediante la asignación de valores directamente a la select 's options colección:

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

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

Answer 4

Aquí hay otra manera de eliminar opciones usando Javascript (similar a la respuesta de Andrew Whitaker) mediante las opciones de matriz:

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