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.
-
What do you mean by 'set the options'? This is ambiguous.Wes Crow– Wes Crow2011-12-28 21:09:54 +00:00Commented Dec 28, 2011 at 21:09
Add a comment
|
5 Answers
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);
But here it is with jQuery anyway:
$("select#D1").append( $("<option>")
.val("value")
.html("text to be displayed")
);
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);
Comments
There are a few different ways. One is:
$("#D1").append("<option>Fred</option>");
Comments
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
Comments
$("#dropdown").html("<option value='val1'>label 1</option><option value='val2' selected='selected'>label 2</option>");
