web-dev-qa-db-fra.com

JQuery crée une nouvelle option de sélection

J'ai les fonctions ci-dessous dans la création régulière de JavaScript en sélectionnant des options. Est-il possible de faire cela avec jQuery sans avoir à utiliser l'objet formulaire? Peut-être stocker les options sous forme de tableau d'objets JSON et les analyser dans la fonction appelante ...

function populate(form)
{
form.options.length = 0;
form.options[0] = new Option("Select a city / town in Sweden","");
form.options[1] = new Option("Melbourne","Melbourne");
}

Voici comment j'appelle la fonction ci-dessus: 

populate(document.form.county); //county is the id of the dropdownlist to populate.
javascriptjqueryhtmljquery-selectors
30
van

Quelque chose comme:

function populate(selector) {
  $(selector)
    .append('<option value="foo">foo</option>')
    .append('<option value="bar">bar</option>')
}

populate('#myform .myselect');

Ou même:

$.fn.populate = function() {
  $(this)
    .append('<option value="foo">foo</option>')
    .append('<option value="bar">bar</option>')
}

$('#myform .myselect').populate();
56
Harold1983-

Qu'en est-il de

var option = $('<option/>');
option.attr({ 'value': 'myValue' }).text('myText');
$('#county').append(option);
37
Tejs

Que diriez-vous

$('#county').append(
    $('<option />')
        .text('Select a city / town in Sweden')
        .val(''),
    $('<option />')
        .text('Melbourne')
        .val('Melbourne')
);
10
CaffGeek

Si vous devez créer un seul élément, vous pouvez utiliser cette construction:

$('<option/>', {
    'class': this.dataID,
    'text': this.s_dataValue
}).appendTo('.subCategory');

Mais si vous devez imprimer plusieurs éléments, vous pouvez utiliser cette construction:

function printOptions(arr){
    jQuery.each(arr, function(){
        $('<option/>', {
            'value': this.dataID,
            'text': this.s_dataValue
        }).appendTo('.subCategory');
    });
}
8
mdBender

Ceci est déroutant. Quand vous dites "objet de formulaire", vous voulez dire "élément <select>"? Sinon, votre code ne fonctionnera pas. Je suppose donc que votre variable form est en fait une référence à un élément <select>. Pourquoi voulez-vous réécrire ce code? Ce que vous avez utilisé dans tous les navigateurs de script depuis 1996 environ et ne va pas cesser de fonctionner de si tôt. Faire cela avec jQuery rendra immédiatement votre code plus lent, plus sujet aux erreurs et moins compatible entre les navigateurs.

Voici une fonction qui utilise votre code actuel comme point de départ et qui remplit un élément <select> à partir d'un objet:

<select id="mySelect"></select>

<script type="text/javascript>

function populateSelect(select, optionsData) {
    var options = select.options, o, selected;
    options.length = 0;
    for (var i = 0, len = optionsData.length; i < len; ++i) {
        o = optionsData[i];
        selected = !!o.selected;
        options[i] = new Option(o.text, o.value, selected, selected);
    }
}

var optionsData = [
    {
        text: "Select a city / town in Sweden",
        value: ""
    },
    {
        text: "Melbourne",
        value: "Melbourne",
        selected: true
    }
];

populateSelect(document.getElementById("mySelect"), optionsData);

</script>
5
Tim Down

Un moyen très simple de faire cela ...

// create the option
var opt = $("<option>").val("myvalue").text("my text");

//append option to the select element
$(#my-select).append(opt);

Cela pourrait être fait de nombreuses façons, même sur une seule ligne si vous le souhaitez vraiment.

0
Tony Norcross