web-dev-qa-db-fra.com

Comment ajouter une option pour sélectionner une liste dans jQuery

Ma liste de sélection s'appelle dropListBuilding. Le code suivant ne semble pas fonctionner:

 for (var i = 0; i < buildings.length; i++) {
     var val = buildings[i];
     var text = buildings[i];
     alert("value of builing at: " + i.toString() + " is: " + val);
     $("#dropListBuilding").addOption(val, text, false);
 }

Cette ligne meurt:

$("#dropListBuilding").addOption(val, text, false);

Quel est le droit d'ajouter des éléments au menu déroulant dans jQuery? J'ai testé sans cette ligne et la variable buildings a mon élément de données.

jqueryhtml-select
63
danila dinan

Ne compliquez pas votre code. Cela peut être fait simplement comme ci-dessous en utilisant un itérateur de type foreach:

$.each(buildings, function (index, value) {
    $('#dropListBuilding').append($('<option/>', { 
        value: value,
        text : value 
    }));
});
121
Haminh Nguyen
$('#dropListBuilding').append('<option>'+val+'</option>');
17
Soufiane Hassou

Le faire de cette façon a toujours fonctionné pour moi, j'espère que cela aidera.

var ddl = $("#dropListBuilding");   
for (k = 0; k < buildings.length; k++)
   ddl.append("<option value='" + buildings[k]+ "'>" + buildings[k] + "</option>");
17
James

Votre code échoue car vous exécutez une méthode (addOption) sur l'objet jQuery (et cet objet ne prend pas en charge la méthode).

Vous pouvez utiliser la fonction Javascript standard comme ceci:

$("#dropListBuilding")[0].options.add( new Option("My Text","My Value") )
7
duckyflip

Cela fonctionne bien, essayez ceci.

var ob = $("#myListBox");

for (var i = 0; i < buildings.length; i++) {
     var val = buildings[i];
     var text = buildings[i];

     ob.prepend("<option value="+ val +">" + text + "</option>");
}
2
Parag Gajjar

Il semble que vous souhaitiez ce branchement car il suit votre code existant, peut-être que le fichier plug-in js a été laissé quelque part.

http://www.texotela.co.uk/code/jquery/select/

var myOptions = {
"Value 1" : "Text 1",
"Value 2" : "Text 2",
"Value 3" : "Text 3"
} 
$("#myselect2").addOption(myOptions, false); 
// use true if you want to select the added options » Run
2
Bob

Si vous ne souhaitez pas utiliser le plug-in de 3,5 ko pour jQuery ou si vous ne souhaitez pas construire la chaîne HTML lors de l'échappement de caractères HTML réservés, voici une méthode simple qui fonctionne:

function addOptionToSelectBox(selectBox, optionId, optionText, selectIt)
{
    var option = document.createElement("option");
    option.value = optionId;
    option.text = optionText;
    selectBox.options[selectBox.options.length] = option;
    if (selectIt) {
        option.selected = true;
    }
}

var selectBox = $('#veryImportantSelectBox')[0];
addOptionToSelectBox(selectBox, "ID1", "Option 1", true);
1
Sebien

Pour moi celui-ci a fonctionné

success: function(data){
            alert("SUCCCESS");
            $.each(data,function(index,itemData){
                console.log(JSON.stringify(itemData));
                $("#fromDay").append( new Option(itemData.lookupLabel,itemData.id) )
            });
        }
1
faisalbhagat