CODEWITHSUNDEEP
javascriptjquerydrop-down-menu
Joey Morani
Joey Morani

Reputation: 26581

How to set options of a dropdown using Javascript/jQuery?

Does anyone know how to set the options and the values of a dropdown menu using javascript or jquery? I'm using this HTML:

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

Thanks for the help.

Upvotes: 23

Views: 54423

Answers (5)

lubosdz
lubosdz

Reputation: 4500

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

Upvotes: 1

Michael Stalcup
Michael Stalcup

Reputation: 596

Here's yet another way to remove options using javascript (similar to Andrew Whitaker's answer) by using the options array:

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

Upvotes: 3

Purag
Purag

Reputation: 17061

You don't even necessarily need jQuery:

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

Example.

But here it is with jQuery anyway:

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

Example.

Upvotes: 54

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

Yet another way of doing it, using 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));

Example: http://jsfiddle.net/pc9Dz/

Or another way, by directly assigning values to the select's options collection:

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

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

Upvotes: 14

scrappedcola
scrappedcola

Reputation: 10572

There are a few different ways. One is:

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

Upvotes: 3

Related Questions