Quelle est la meilleure façon d'ajouter des options à sélectionner à partir d'un objet JS avec jQuery?

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

je cherche quelque chose que je n'ai pas besoin d'un plugin pour faire, mais je serais aussi intéressé par les plugins qui sont là-bas.

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

Un nettoyage/la solution la plus simple:

c'est une version nettoyée et simplifiée de de matdumsa:

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

Changements de matdumsa: (1) suppression de la balise de fermeture de l'option à l'intérieur append() et (2) déplacé à l'propriétés/attributs dans une carte en tant que second paramètre de la fonction append().

1223
demandé sur Darryl Hein 2008-10-05 00:58:46
la source

30 ответов

comme les autres réponses, en jQuery fashion:

$.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(value)); 
});
1237
répondu matdumsa 2016-04-11 18:24:03
la source
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" une seule fois.

Je ne suis pas sûr que la dernière ligne puisse être convertie en $('#mySelect').html(de sortie.join (")) parce que je ne connais pas jquery internals (peut-être qu'il fait un parsing dans la méthode html() )

243
répondu gpilotino 2017-12-27 18:34:24
la source

C'est un peu plus rapide et plus propre.

$.each(selectValues, function(key, value) {
    $('#mySelect').append($("<option/>", {
        value: key,
        text: value
    }));
});
182
répondu rocktheroad 2014-03-20 15:26:56
la source

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));
}
81
répondu Carl Hörberg 2018-05-13 16:23:32
la source

à l'Aide des Éléments du DOM Créateur du plugin (mon préféré):

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

utilisant le constructeur Option (pas sûr du support du navigateur):

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

utilisant document.createElement (en évitant le travail supplémentaire parsing HTML avec $("<option></option>") ):

$('#mySelect').append($(document.createElement("option")).
                        attr("value","val").text("myText"));
31
répondu Nickolay 2008-10-05 19:49:09
la source

cela semble plus agréable, offre 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 plus rapide (testé! la manière est celle-ci, en utilisant array, pas string concatenation, et en n'utilisant qu'un seul appel d'ajout.

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

$('#selectBox').append(auxArr.join(''));
26
répondu m1sfit 2011-05-02 21:53:03
la source

Toutes ces réponses semblent inutilement compliqué. 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);
});

qui est complètement compatible avec les navigateurs croisés.

18
répondu Animism 2015-11-05 03:48:09
la source

@joshperry

il semble que simple .ajouter fonctionne aussi comme prévu,

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

    return $("<option>").val(k).text(v);
  })
);
17
répondu Сухой27 2013-04-17 15:29:16
la source

soit transité... J'utilise jQuery Mobile 1.0B2 avec PhoneGap 1.0.0 sur un téléphone Android 2.2 (cyanogène 7.0.1) (T-Mobile G2) et n'a pas pu obtenir le .append() la méthode de travail à tous. J'ai eu à utiliser .html () comme suit:

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

$('#selectMenu').html(options);
14
répondu Jack Holt 2016-11-19 10:42:29
la source
 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 c'est, je crois, fait le travail le plus rapide. : P

14
répondu Thorpe Obazee 2017-07-16 08:38:45
la source

il y a une approche utilisant la approche Microsoft Templating qui est actuellement en cours de proposition pour inclusion dans jQuery core. Il y a plus de pouvoir dans l'utilisation du modèle, donc pour le scénario le plus simple, ce n'est peut-être pas la meilleure option. Pour plus de détails, voir le post de Scott Gu décrivant les caractéristiques.

tout d'Abord inclure le template de fichier js, disponible à partir de github .

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

modèle

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

alors avec vos données appelez le .méthode de render() 151960920"

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.

11
répondu Nick Josevski 2010-07-08 09:00:35
la source

j'ai fait quelque chose comme ceci, chargement d'un élément de descente via Ajax . La réponse ci-dessus est également acceptable, mais il est toujours bon d'avoir aussi peu de modifications DOM que possible pour une meilleure performance.

Donc, plutôt que d'ajouter chaque élément à l'intérieur d'une boucle, il est préférable de recueillir des éléments à l'intérieur d'une boucle et l'ajouter une fois que c'est terminé.

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

annexe,

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

ou même mieux

$('#select_id').html(items);
7
répondu Komang 2011-05-02 21:59:29
la source

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 D'Option en utilisant map et puis les ajoute tous au Select à la fois en utilisant apply pour envoyer chaque Option comme un argument séparé sur la fonction append .

6
répondu joshperry 2010-10-02 00:22:07
la source

la voie simple est:

$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");
6
répondu willard macay 2017-07-17 04:02:37
la source
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 l'article complet pour l'utilisation des listes dynamiques avec ASP.NET MVC & jQuery visit: http://www.codecapers.com/post/Dynamic-Select-Lists-with-MVC-and-jQuery.aspx

5
répondu H Sampat 2010-02-05 14:56:17
la source

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"};

à ce

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

et ensuite les $.chacun ressemblera à:

$.each(optionValues0, function(order, object) {
  key = object.id;
  value = object.value;
  $('#mySelect').append($('<option>', { value : key }).text(value));
}); 
4
répondu Michail 2012-09-21 13:27:00
la source

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);
4
répondu DiverseAndRemote.com 2013-04-26 01:59:06
la source
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 manipule le DOM une seule fois après avoir construit une chaîne géante.

4
répondu Christian Roman 2013-10-02 21:16:31
la source

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

Voir John Resig réflexions sur la question ...

quelque chose du genre:

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);
4
répondu Stuart.Sklinar 2017-12-27 18:40:49
la source
  1. $.each est plus lent qu'une for boucle
  2. chaque fois, une sélection DOM n'est pas la meilleure pratique dans la boucle $("#mySelect").append();

donc la meilleure solution est la suivante

si JSON data resp est

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

utilisez-le comme

var option = "";
for (i=0; i<resp.length; i++) {
    option += "<option value='" + resp[i].id + "'>" + resp[i].name + "</option>";
}
$('#mySelect').html(option);
4
répondu Salim 2017-12-27 18:46:54
la source

Plutôt que de répéter le même code partout, je dirais qu'il est 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, il suffit de faire ce qui suit:

$('select').addOption('0', 'None');
4
répondu Matt 2017-12-27 18:48:42
la source

vous pouvez simplement itérer sur votre tableau json avec le code suivant

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

3
répondu kashif 2010-09-08 23:16:25
la source
3
répondu lkahtz 2010-12-24 19:23:44
la source

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
répondu DW333 2012-11-14 00:44:40
la source

C'est ce que j'ai fait avec les tableaux bidimensionnels: la première colonne est l'article i, ajouter à innerHTML du <option> . La deuxième colonne est record_id i, ajouter au 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();
        }
    }
    
2
répondu Salty 2017-12-27 18:39:52
la source

Le format JSON:

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

et le code jQuery pour remplir les valeurs à la baisse sur le succès 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
}
2
répondu M_J 2017-12-27 18:50:07
la source

utilisant le $.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(''));
1
répondu Dr Fred 2017-12-27 18:50:39
la source

je combine les deux meilleures réponses dans une grande 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
répondu Erick Asto Oblitas 2015-10-08 06:06:42
la source
$.each(selectValues, function(key, value) {
    $('#mySelect').append($("<option/>", {
        value: key, text: value
    }));
});
0
répondu Lokesh thakur 2017-10-31 09:26:54
la source
<!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>
0
répondu Satyendra Yadav 2018-03-29 19:03:33
la source

Autres questions sur javascript jquery arrays html-select