web-dev-qa-db-fra.com

Quel est le meilleur moyen d’ajouter des options à une sélection en tant qu’objet JS avec jQuery?

Quelle est la meilleure méthode pour ajouter des options à un <select> à partir d'un objet JavaScript à l'aide de jQuery?

Je cherche quelque chose pour lequel je n'ai pas besoin d'un plugin, mais je serais également intéressé par les plugins existants.

C'est ce que j'ai fait:

selectValues = { "1": "test 1", "2": "test 2" };

for (key in selectValues) {
  if (typeof (selectValues[key] == 'string') {
    $('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
  }
}

Une solution propre/simple:

Ceci est une version de matdumsa } _ nettoyée et simplifiée:

$.each(selectValues, function(key, value) {
     $('#mySelect')
          .append($('<option>', { value : key })
          .text(value));
});

Modifications depuis matdumsa: (1) suppression de la balise de fermeture pour l'option dans append () et (2) déplacement des propriétés/attributs dans une carte en tant que deuxième paramètre de append ().

javascriptjqueryarrayshtml-select
1276
Darryl Hein

Identique aux autres réponses, de manière jQuery:

$.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(value)); 
});
1292
matdumsa
var output = [];

$.each(selectValues, function(key, value)
{
  output.Push('<option value="'+ key +'">'+ value +'</option>');
});

$('#mySelect').html(output.join(''));

De cette façon, vous ne touchez le DOM qu'une seule fois. 

Je ne suis pas sûr que la dernière ligne puisse être convertie en $ ('# mySelect'). Html (output.join ('')) car je ne connais pas les éléments internes de jQuery (peut-être Méthode html ())

248
gpilotino

Ceci est légèrement plus rapide et plus propre.

$.each(selectValues, function(key, value) {
    $('#mySelect').append($("<option/>", {
        value: key,
        text: value
    }));
});
187
rocktheroad

jQuery

var list = $("#selectList");
$.each(items, function(index, item) {
  list.append(new Option(item.text, item.value));
});

Vanilla JavaScript

var list = document.getElementById("selectList");
for(var i in items) {
  list.add(new Option(items[i].text, items[i].value));
}
86
Carl Hörberg

Utilisation de plug-in DOM Elements Creator (mon préféré):

$.create('option', {'value': 'val'}, 'myText').appendTo('#mySelect');

Utilisation du constructeur Option (vous n'êtes pas sûr du support du navigateur):

$(new Option('myText', 'val')).appendTo('#mySelect');

Utilisation de document.createElement (afin d’éviter des tâches supplémentaires lors de l’analyse HTML avec $("<option></option>")):

$('#mySelect').append($(document.createElement("option")).
                        attr("value","val").text("myText"));
33
Nickolay

Cela a l'air plus joli, fournit la lisibilité, mais est plus lent que d'autres méthodes.

$.each(selectData, function(i, option)
{
    $("<option/>").val(option.id).text(option.title).appendTo("#selectBox");
});

Si vous voulez de la vitesse, le moyen le plus rapide (testé!) Est le suivant: utilisation de tableau, pas de concaténation de chaînes, et utilisation d'un seul appel d'ajout.

auxArr = [];
$.each(selectData, function(i, option)
{
    auxArr[i] = "<option value='" + option.id + "'>" + option.title + "</option>";
});

$('#selectBox').append(auxArr.join(''));
28
m1sfit

Toutes ces réponses semblent inutilement compliquées. Tout ce dont tu as besoin c'est:

var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
        options[options.length] = new Option(value, key);
});

C'est complètement compatible avec tous les navigateurs.

19
Animism

@joshperry

Il semble que plain .append fonctionne aussi comme prévu,

$("mySelect").append(
  $.map(selectValues, function(v,k){

    return $("<option>").val(k).text(v);
  })
);
19
Сухой27
 var output = [];
 var length = data.length;
 for(var i = 0; i < length; i++)
 {
    output[i++] = '<option value="' + data[i].start + '">' + data[i].start + '</option>';
 }

 $('#choose_schedule').get(0).innerHTML = output.join('');

J'ai fait quelques tests et cela, je crois, fait le travail le plus rapidement. : P

15
Thorpe Obazee

Soyez averti ... J'utilise jQuery Mobile 1.0b2 avec PhoneGap 1.0.0 sur un téléphone Android 2.2 (Cyanogen 7.0.1) (T-Mobile G2) et je ne pouvais pas faire fonctionner la méthode .append (). Je devais utiliser .html () comme suit:

var options;
$.each(data, function(index, object) {
    options += '<option value="' + object.id + '">' + object.stop + '</option>';
});

$('#selectMenu').html(options);
15
Jack Holt

Il existe une approche utilisant l’approche Microsoft Templating qui est actuellement en cours d’inclusion dans jQuery. L'utilisation de la création de gabarits offre plus de puissance. Dans le cas le plus simple, ce n'est peut-être pas la meilleure option. Pour plus de détails, voir l'article de Scott Gu décrivant les fonctionnalités.

Commencez par inclure le fichier js de gabarit, disponible à partir de github .

<script src="Scripts/jquery.tmpl.js" type="text/javascript" />

Prochaine mise en place d'un modèle

<script id="templateOptionItem" type="text/html">
    <option value=\'{{= Value}}\'>{{= Text}}</option>
</script>

Puis, avec vos données, appelez la méthode .render ()

var someData = [
    { Text: "one", Value: "1" },
    { Text: "two", Value: "2" },
    { Text: "three", Value: "3"}];

$("#templateOptionItem").render(someData).appendTo("#mySelect");

J'ai blogué cette approche plus en détail.

12
Nick Josevski

J'ai créé quelque chose comme ceci: chargement d'un élément déroulant via Ajax . La réponse ci-dessus est également acceptable, mais il est toujours bon d’avoir le moins de modifications possible dans le DOM pour de meilleures performances.

Ainsi, plutôt que d’ajouter chaque élément dans une boucle, il est préférable de rassembler les éléments dans une boucle et de l’ajouter une fois terminée.

$(data).each(function(){
    ... Collect items
})

L'ajouter,

$('#select_id').append(items);

ou même mieux 

$('#select_id').html(items);
9
Komang

Une sorte de compromis entre les deux premières réponses, dans un "one-liner":

$.fn.append.apply($('mySelect'),
    $.map(selectValues, function(val, idx) {
        return $("<option/>")
            .val(val.key)
            .text(val.value);
    })
);

Construit un tableau d’éléments Option à l’aide de map , puis les ajoute tous à la fois à la sélection en utilisant apply pour envoyer chaque option en tant qu’argument distinct de la fonction append.

7
joshperry

Le moyen simple est:

$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");
7
willard macay

Plutôt que de répéter le même code partout, je suggérerais qu'il soit plus souhaitable d'écrire votre propre fonction jQuery comme:

jQuery.fn.addOption = function (key, value) {
    $(this).append($('<option>', { value: key }).text(value));
};

Ensuite, pour ajouter une option, procédez comme suit:

$('select').addOption('0', 'None');
7
Matt
  1. $.each est plus lent qu'une boucle for
  2. À chaque fois, une sélection DOM n'est pas la meilleure pratique de la boucle $("#mySelect").append();

Donc, la meilleure solution est la suivante

Si les données JSON resp sont

[
    {"id":"0001", "name":"Mr. P"},
    {"id":"0003", "name":"Mr. Q"},
    {"id":"0054", "name":"Mr. R"},
    {"id":"0061", "name":"Mr. S"}
]

l'utiliser comme

var option = "";
for (i=0; i<resp.length; i++) {
    option += "<option value='" + resp[i].id + "'>" + resp[i].name + "</option>";
}
$('#mySelect').html(option);
6
Salim
function populateDropdown(select, data) {   
    select.html('');   
    $.each(data, function(id, option) {   
        select.append($('<option></option>').val(option.value).html(option.name));   
    });          
}

Cela fonctionne bien avec jQuery 1.4.1.

Pour un article complet sur l’utilisation des listes dynamiques avec ASP.NET MVC & jQuery, visitez le site: http://www.codecapers.com/post/Dynamic-Select-Lists-with-MVC-and-jQuery.aspx

6
H Sampat

Vous pouvez simplement parcourir votre tableau JSON avec le code suivant

$('<option/>').attr("value","someValue").text("Option1").appendTo("#my-select-id");

5
kashif

Bien que les réponses précédentes soient toutes des réponses valables, il peut être conseillé de les ajouter d’abord à un documentFragmnet, puis d’ajouter ce fragment de document en tant qu’élément après ...

Voir Réflexions de John Resig sur le sujet ...

Quelque chose dans le genre de:

var frag = document.createDocumentFragment();

for(item in data.Events)
{
    var option = document.createElement("option");

    option.setAttribute("value", data.Events[item].Key);
    option.innerText = data.Events[item].Value;

    frag.appendChild(option);
}
eventDrop.empty();
eventDrop.append(frag);
5
Stuart.Sklinar

Il y a un problème de tri avec cette solution dans Chrome (jQuery 1.7.1) (Chrome trie les propriétés des objets par nom/numéro?) Alors, pour conserver l'ordre (oui, c'est un abus de l'objet), j'ai changé ceci:

optionValues0 = {"4321": "option 1", "1234": "option 2"};

pour ça

optionValues0 = {"1": {id: "4321", value: "option 1"}, "2": {id: "1234", value: "option 2"}};

et alors le $ .each ressemblera à:

$.each(optionValues0, function(order, object) {
  key = object.id;
  value = object.value;
  $('#mySelect').append($('<option>', { value : key }).text(value));
});
5
Michail

Encore une autre façon de le faire:

var options = [];    
$.each(selectValues, function(key, value) {
    options.Push($("<option/>", {
        value: key,
        text: value
    }));
});
$('#mySelect').append(options);
5
DiverseAndRemote.com
if (data.length != 0) {
    var opts = "";
    for (i in data)
        opts += "<option value='"+data[i][value]+"'>"+data[i][text]+"</option>";

    $("#myselect").empty().append(opts);
}

Cela ne manipule le DOM qu'une seule fois après avoir construit une chaîne géante.

5
Christian Roman

Le format JSON:

[{
    "org_name": "Asset Management"
}, {
    "org_name": "Debt Equity Foreign services"
}, {
    "org_name": "Credit Services"
}]

Et le code jQuery pour renseigner les valeurs du succès de Dropdown on Ajax:

success: function(json) {
    var options = [];
    $('#org_category').html('');  // Set the Dropdown as Blank before new Data
    options.Push('<option>-- Select Category --</option>');
    $.each(JSON.parse(json), function(i, item) {
        options.Push($('<option/>',
        {
           value: item.org_name, text: item.org_name
        }));
    });
    $('#org_category').append(options);  // Set the Values to Dropdown
}
3
M.J

C'est ce que j'ai fait avec les tableaux à deux dimensions: La première colonne est le point i, ajouter à innerHTML du <option>. La deuxième colonne est record_id i, à ajouter à la value du <option>:

  1. PHP

    $items = $dal->get_new_items(); // Gets data from the database
$items_arr = array();
$i = 0;
foreach ($items as $item)
{
    $first_name = $item->first_name;
    $last_name = $item->last_name;
    $date = $item->date;
    $show = $first_name . " " . $last_name . ", " . $date;
    $request_id = $request->request_id;
    $items_arr[0][$i] = $show;
    $items_arr[1][$i] = $request_id;
    $i++;
}

echo json_encode($items_arr);

  2. JavaScript/Ajax

            function ddl_items() {
            if (window.XMLHttpRequest) {
                // Code for Internet Explorer 7+, Firefox, Chrome, Opera, and Safari
                xmlhttp=new XMLHttpRequest();
            }
            else{
                // Code for Internet Explorer 6 and Internet Explorer 5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                var arr = JSON.parse(xmlhttp.responseText);
                var lstbx = document.getElementById('my_listbox');

                for (var i=0; i<arr.length; i++) {
                    var option = new Option(arr[0][i], arr[1][i]);
                    lstbx.options.add(option);
                }
            }
        };

        xmlhttp.open("GET", "Code/get_items.php?dummy_time=" + new Date().getTime() + "", true);
        xmlhttp.send();
    }
}
3
Salty

Un plugin jQuery peut être trouvé ici: http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/ .

3
lkahtz

En utilisant la fonction $ .map (), vous pouvez le faire de manière plus élégante:

$('#mySelect').html( $.map(selectValues, function(val, key){
    return '<option value="' + val + '">'+ key + '</option>';
}).join(''));
2
Dr Fred

J'ai trouvé que c'est simple et fonctionne très bien. 

for (var i = 0; i < array.length; i++) {
    $('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
};
2
DW333

Définissez votre ID de sélection HTML dans la ligne suivante. Ici, mySelect est utilisé comme id de l'élément select. 

   var options = $("#mySelect");

ensuite, obtenez l'objet qui est la selectValues ​​dans ce scénario et le définit à la jquery pour chaque boucle. Il utilisera la valeur et le texte des objets en conséquence et les ajoutera aux sélections d’option comme suit. 

$.each(selectValues, function(val, text) {
            options.append(
             $('<option></option>').val(val).html(text)
          );
      });

Ceci affichera le texte comme liste d'options lorsque la liste déroulante est sélectionnée et qu'une fois qu'un texte est sélectionné, la valeur du texte sélectionné sera utilisée. 

Par exemple.

"1": "test 1", "2": "test 2",

Menu déroulant,

nom d'affichage: test 1 -> la valeur est 1 nom d'affichage: test 2 -> la valeur est 2

1
Dulith De Costa

J'ai décidé de sonner un peu.

  1. Traiter avec l'option préalablement choisie; certains navigateurs gâchent quand nous ajoutons
  2. SEULEMENT frapper DOM une fois avec l’ajout
  3. Traiter avec la propriété multiple tout en ajoutant plus d'options
  4. Montrer comment utiliser un objet
  5. Montrer comment mapper à l'aide d'un tableau d'objets

// objects as value/desc
let selectValues = {
  "1": "test 1",
  "2": "test 2",
  "3": "test 3",
  "4": "test Four"
};
//use div here as using "select" mucks up the original selected value in "mySelect"
let opts = $("<div />");
let opt = {};
$.each(selectValues, function(value, desc) {
  opts.append($('<option />').prop("value", value).text(desc));
});
opts.find("option").appendTo('#mySelect');

// array of objects called "options" in an object
let selectValuesNew = {
  options: [{
      value: "1",
      description: "2test 1"
    },
    {
      value: "2",
      description: "2test 2",
      selected: true
    },
    {
      value: "3",
      description: "2test 3"
    },
    {
      value: "4",
      description: "2test Four"
    }
  ]
};

//use div here as using "select" mucks up the original selected value
let opts2 = $("<div />");
let opt2 = {}; //only append after adding all options
$.map(selectValuesNew.options, function(val, index) {
  opts2.append($('<option />')
    .prop("value", val.value)
    .prop("selected", val.selected)
    .text(val.description));
});
opts2.find("option").appendTo('#mySelectNew');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mySelect">
  <option value="" selected="selected">empty</option>
</select>

<select id="mySelectNew" multiple="multiple">
  <option value="" selected="selected">2empty</option>
</select>

1
Mark Schultheiss
<!DOCTYPE html>
<html lang="en">
<head>
  <title>append selectbox using jquery</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script type="text/javascript">
    function setprice(){
        var selectValues = { "1": "test 1", "2": "test 2" };
        $.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(value)); 
});

    }
  </script>
</head>
<body onload="setprice();">


      <select class="form-control" id="mySelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>


</body>
</html>
1
Satyendra Yadav
$.each(selectValues, function(key, value) {
    $('#mySelect').append($("<option/>", {
        value: key, text: value
    }));
});
0
Lokesh thakur

Puisque append de JQuery peut prendre un tableau comme argument, je suis surpris que personne n'ait suggéré d'en faire un one-liner avec map

$('#the_select').append(['a','b','c'].map(x => $('<option>').text(x)));

ou reduce

['a','b','c'].reduce((s,x) => s.append($('<option>').text(x)), $('#the_select'));
0
SU3

Je combine les deux meilleures réponses en une excellente réponse.

var outputConcatenation = [];

$.each(selectValues, function(i, item) {   
     outputConcatenation.Push($("<option></option>").attr("value", item.key).attr("data-customdata", item.customdata).text(item.text).prop("outerHTML"));
});

$("#myselect").html(outputConcatenation.join(''));
0
Erick Asto Oblitas

En fait, pour obtenir de meilleures performances, il est préférable d’établir une liste d’options séparément et d’ajouter à id. 

var options = [];
$.each(selectValues, function(key, value) {
    options.Push ($('<option>', { value : key })
          .text(value));
});
 $('#mySelect').append(options);

http://learn.jquery.com/performance/append-outside-loop/

0
shohan