Quelle est la meilleure façon d'ajouter des options à une sélection en tant qu'objet JS avec jQuery ?

Question

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

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

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 un nettoyage et simplifié version de Matdumsa:

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

Changements par rapport à Matdumsa :(1) a supprimé la balise de fermeture pour l'option à l'intérieur de append() et (2) a déplacé les propriétés/attributs dans une carte en tant que deuxième paramètre de append().

Answer 1

Identique aux autres réponses, en mode jQuery:

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

Answer 2

var output = [];

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

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

De cette façon, vous & touchez le DOM & "; seulement une fois.

Je ne sais pas si la dernière ligne peut être convertie en $ ('# mySelect'). Html (output.join ('')) car je ne connais pas les éléments internes de jQuery (peut-être qu'il effectue une analyse syntaxique dans html () méthode)

Answer 3

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mySelect"></select>

Answer 4

jQuery

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

JavaScript vanille

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

Answer 5

Utilisation du plug-in de DOM Elements Creator (mon favori):

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

Utilisation du constructeur Option (vous n'êtes pas sûr de la prise en charge du navigateur):

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

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

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

Answer 6

Cela semble plus joli, offre une lisibilité, mais est plus lent que les 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: utiliser un tableau, pas la concaténation de chaînes, et utiliser un seul appel append.

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

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

Answer 7

@joshperry

Il semble que .append fonctionne également comme prévu,

.

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

    return $("<option>").val(k).text(v);
  })
);

Answer 8

Toutes ces réponses semblent inutilement compliquées. Tout ce dont vous avez besoin est:

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

Cela est totalement compatible avec tous les navigateurs.

Answer 9

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 parviens pas à utiliser la méthode .append (). tout. Je devais utiliser .html () comme suit:

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

$('#selectMenu').html(options);

Answer 10

 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 ceci, je crois, fait le travail le plus rapidement. : P

Answer 11

Une approche utilisant l’approche utilisant des modèles est actuellement en cours de proposition. pour l'inclusion dans le noyau 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 modèle, disponible sur github .

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

Configurer ensuite 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 a blogué cette approche plus en détail.

Answer 12

J'ai créé quelque chose comme ceci, chargement d'un élément de liste déroulante 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 obtenir 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 d’une boucle et de l’ajouter une fois terminée.

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

Ajoutez-le,

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

ou même mieux

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

Answer 13

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 sélection. en utilisant apply pour envoyer chaque option sous la forme d'un argument distinct de la append fonction.

Answer 14

La méthode la plus simple est la suivante:

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

Answer 15

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 telle que:

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');

Answer 16

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 de listes dynamiques avec ASP.NET MVC & amp; Visite jQuery: http://www.codecapers.com/post /Dynamic-Select-Lists-with-MVC-and-jQuery.aspx

Answer 17

1. $.each est plus lent qu'une for boucle
2. A chaque fois, une sélection DOM n'est pas la meilleure pratique en boucle $("#mySelect").append();

La meilleure solution est donc 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);

Answer 18

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?) Donc pour garder l'ordre (oui, c'est un abus d'objet), j'ai changé ceci:

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

à ceci

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

et le $ .each ressemblera à:

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

Answer 19

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);

Answer 20

if (data.length != 0) {
    var opts = "";
    for (i in data)
        opts += "<option value='"+data[i][value]+"'>"+data[i][text]+"</option>";

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

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

Answer 21

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

Consultez les réflexions de John Resig sur le sujet ...

.

Quelque chose dans le sens 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);

Answer 22

Vous pouvez simplement parcourir votre tableau JSON avec le code suivant

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

Answer 23

Un plugin jQuery est disponible ici: http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/ .

Answer 24

C’est ce que j’ai fait avec les tableaux à deux dimensions: la première colonne correspond au point i, à ajouter à innerHTML du <option>. La seconde colonne est record_id i, à ajouter au value des <=>:

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();
       }
   }
   

Answer 25

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 dans la liste déroulante des succès d'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
}

Answer 26

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

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

Answer 27

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

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

Answer 28

<!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>

Answer 29

Définissez votre identifiant de sélection HTML dans la ligne suivante ci-dessous.Ici mySelect est utilisé comme identifiant de l’élément select.

   var options = $("#mySelect");

puis récupérez l'objet qui est le selectValues ​​dans ce scénario et définissez-le sur jquery pour chaque boucle.Il utilisera la valeur et le texte des objets en conséquence et les ajoutera aux sélections d'options comme suit.

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

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

Par exemple.

"1":"Tester 1", "2":"essai 2",

Dérouler,

Afficher un nom:Test 1 -> La valeur est 1 nom d'affichage:test 2 -> la valeur est 2

Answer 30

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

1. Traiter avec l'option préalablement sélectionnée; certains navigateurs gâchent quand on ajoute
2. Ne frappez DOM qu'une seule fois avec l'ajout
3. Gestion de la propriété multiple lors de l'ajout d'options supplémentaires
4. Montrer comment utiliser un objet
5. Montrer comment mapper en utilisant 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>