JQuery créer une nouvelle option de sélection

Question

J'ai les fonctions ci-dessous en JavaScript normal créant des options de sélection. Est-ce que je peux faire cela avec jQuery sans avoir à utiliser l'objet formulaire? Peut-être stocker les options comme un tableau d'objets JSON et l'analyse syntaxique cela dans la fonction d'appel ...

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

est ci-dessous comment j'appelle la fonction ci-dessus:

populate(document.form.county); //county is the id of the dropdownlist to populate.  

Answer 1

Quelque chose comme:

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

populate('#myform .myselect'); 

Ou encore:

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

$('#myform .myselect').populate(); 

Answer 2

Qu'en est-

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

Answer 3

Que diriez-vous

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

Answer 4

C'est source de confusion. Quand vous dites "objet de forme", voulez-vous dire "<select> element"? Sinon, votre code ne fonctionnera pas, donc je suppose 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 travaillé dans tous les navigateurs scriptables depuis environ 1996, et ne cessera pas de travailler de sitôt. Le faire avec jQuery rendra 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 alimente un élément <select> 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> 

Answer 5

Si vous avez besoin de faire un seul élément, vous pouvez utiliser cette construction:

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

Mais si vous avez besoin d'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'); 
    }); 
}