JQuery crear nueva opción de selección

Question

Tengo las siguientes funciones en JavaScript normal creando opciones de selección. ¿Hay alguna manera de que pueda hacer esto con jQuery sin tener que usar el objeto de formulario? Tal vez el almacenamiento de las opciones como un conjunto de objetos JSON y analizar esto en la función de llamar ...

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

A continuación se muestra cómo llamar a la función anterior:

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

Answer 1

Algo así como:

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

populate('#myform .myselect'); 

O incluso:

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

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

Answer 2

¿Qué hay de

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

Answer 3

¿Qué tal

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

Answer 4

esto es confuso. Cuando dice "objeto de formulario", ¿quiere decir "elemento <select>"? De lo contrario, su código no funcionará, por lo que supongo que su variable form es, de hecho, una referencia a un elemento <select>. ¿Por qué quieres reescribir este código? Lo que tiene ha funcionado en todos los navegadores con script desde 1996, y no dejará de funcionar en el corto plazo. Si lo hace con jQuery, su código será más lento, propenso a errores y menos compatible en todos los navegadores.

Aquí es una función que utiliza su código actual como punto de partida y rellena un elemento <select> de un objeto:

<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 usted necesita para hacer un solo elemento puede utilizar esta construcción:

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

Pero si necesita imprimir muchos elementos, puede usar esta construcción:

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