web-dev-qa-db-fra.com

Comment définir les options d'une liste déroulante en utilisant Javascript / jQuery?

Est-ce que quelqu'un sait comment définir les options et les valeurs d'un menu déroulant en utilisant javascript ou jquery? J'utilise ce HTML:

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

Merci pour l'aide.

javascriptjquerydrop-down-menu
19
Joey Morani

Vous n'avez même pas nécessairement besoin de jQuery:

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

Exemple .

Mais le voici avec jQuery quand même:

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

Exemple .

45
Purag

Encore une autre façon de le faire, en utilisant selectméthode add :

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

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

Exemple: http://jsfiddle.net/pc9Dz/

Ou d'une autre manière, en affectant directement des valeurs à la collection select de options:

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

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

Voici encore une autre façon de supprimer des options en utilisant javascript (similaire à la réponse d'Andrew Whitaker) en utilisant le tableau d'options:

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

Il existe plusieurs façons différentes. L'un est:

$("#D1").append("<option>Fred</option>");
2
scrappedcola
$("#dropdown").html("<option value='val1'>label 1</option><option value='val2' selected='selected'>label 2</option>");
0
lubosdz