Réponses:
Sans utiliser de plugins supplémentaires,
var myOptions = {
val1 : 'text1',
val2 : 'text2'
};
var mySelect = $('#mySelect');
$.each(myOptions, function(val, text) {
mySelect.append(
$('<option></option>').val(val).html(text)
);
});
Si vous aviez beaucoup d'options ou que ce code devait être exécuté très fréquemment, vous devriez envisager d'utiliser un DocumentFragment au lieu de modifier le DOM plusieurs fois inutilement. Pour seulement quelques options, je dirais que cela n'en vaut pas la peine.
------------------------------- Ajoutée ------------------ --------------
DocumentFragment
est une bonne option pour l'amélioration de la vitesse, mais nous ne pouvons pas créer d'élément d'option en utilisant document.createElement('option')
puisque IE6 et IE7 ne le prennent pas en charge.
Ce que nous pouvons faire, c'est créer un nouvel élément de sélection, puis ajouter toutes les options. Une fois la boucle terminée, ajoutez-la à l'objet DOM réel.
var myOptions = {
val1 : 'text1',
val2 : 'text2'
};
var _select = $('<select>');
$.each(myOptions, function(val, text) {
_select.append(
$('<option></option>').val(val).html(text)
);
});
$('#mySelect').append(_select.html());
De cette façon, nous ne modifierons le DOM qu'une seule fois!
val
et text
décris en fait les variables et leur utilisation.
mySelect.append(new Option(text, val));
, ce qui ne fonctionnait pas dans IE8. Je devais passer à @ nickfmySelect.append($('<option></option>').val(val).html(text));
.attr('selected', true|false)
Sans plug-in, cela peut être plus facile sans utiliser autant de jQuery, au lieu d'aller un peu plus à l'ancienne:
var myOptions = {
val1 : 'text1',
val2 : 'text2'
};
$.each(myOptions, function(val, text) {
$('#mySelect').append( new Option(text,val) );
});
Si vous souhaitez spécifier si l'option a) est la valeur sélectionnée par défaut et b) doit être sélectionnée maintenant, vous pouvez passer deux paramètres supplémentaires:
var defaultSelected = false;
var nowSelected = true;
$('#mySelect').append( new Option(text,val,defaultSelected,nowSelected) );
"<option></option>"
méthode; cela semble sale.
Avec le plugin: Boîte de sélection jQuery . Tu peux le faire:
var myOptions = {
"Value 1" : "Text 1",
"Value 2" : "Text 2",
"Value 3" : "Text 3"
}
$("#myselect2").addOption(myOptions, false);
Ajouter un élément à la liste au début
$("#ddlList").prepend('<option selected="selected" value="0"> Select </option>');
Ajouter un élément à la liste à la fin
$('<option value="6">Java Script</option>').appendTo("#ddlList");
Opération de liste déroulante commune (Get, Set, Add, Remove) à l'aide de jQuery
.prepend("...") / $("...")
pour .prepend('...') / $('...')
corriger l'extrait de code.
Veuillez noter que la solution de @ Phrogz ne fonctionne pas dans IE 8 tandis que celle de @ nickf fonctionne dans tous les principaux navigateurs. Une autre approche est:
$.each(myOptions, function(val, text) {
$("#mySelect").append($("<option/>").attr("value", val).text(text));
});
Et aussi, utilisez .prepend () pour ajouter l'option au début de la liste d'options. http://api.jquery.com/prepend/
en utilisant jquery, vous pouvez utiliser
this.$('select#myid').append('<option>newvalue</option>');
où " myid " est l' id de la liste déroulante et newvalue est le texte que vous souhaitez insérer.
Je devais ajouter autant d'options aux listes déroulantes qu'il y avait de listes déroulantes sur ma page. Je l'ai donc utilisé de cette façon:
function myAppender(obj, value, text){
obj.append($('<option></option>').val(value).html(text));
}
$(document).ready(function() {
var counter = 0;
var builder = 0;
// Get the number of dropdowns
$('[id*="ddlPosition_"]').each(function() {
counter++;
});
// Add the options for each dropdown
$('[id*="ddlPosition_"]').each(function() {
var myId = this.id.split('_')[1];
// Add each option in a loop for the specific dropdown we are on
for (var i=0; i<counter; i++) {
myAppender($('[id*="ddlPosition_'+myId+'"]'), i, i+1);
}
$('[id*="ddlPosition_'+myId+'"]').val(builder);
builder++;
});
});
Cela a créé dynamiquement des listes déroulantes avec des valeurs comme 1 à n, et a automatiquement sélectionné la valeur de l'ordre dans lequel la liste déroulante était (c.-à-d. Que la deuxième liste déroulante a obtenu "2" dans la case, etc.).
C'était ridicule que je ne puisse pas utiliser this
ou this.Object
ou $.obj
ou quelque chose comme ça dans mon 2e .each()
, cependant --- j'ai dû en fait obtenir l'ID spécifique de cet objet, puis saisir et transmettre cet objet entier à ma fonction avant qu'il ne soit ajouté. Heureusement, l'ID de ma liste déroulante a été séparée par un "_" et j'ai pu la saisir. Je ne pense pas que j'aurais dû le faire, mais cela me donnait des exceptions jQuery dans le cas contraire. Quelque chose que les autres aux prises avec ce que j'étais pourrait aimer savoir.
Imaginons que votre réponse soit "successData". Il contient une liste que vous devez ajouter comme options dans un menu déroulant.
success: function (successData) {
var sizeOfData = successData.length;
if (sizeOfData == 0) {
// NO DATA, throw an alert ...
alert ("No Data Found");
} else {
$.each(successData, function(val, text) {
mySelect.append(
$('<option></option>').val(val).html(text)
);
});
} }
Cela fonctionnerait pour vous ....
essayez cette fonction:
function addtoselect(param,value){
$('#mySelectBox').append('<option value='+value+'>'+param+'</option>');
}