¿Mantener pares clave-valor juntos en HTML <select/> con jQuery?

Question

Dada una selección con múltiples opciones en jQuery.

$select = $("<select></select>");
$select.append("<option>Jason</option>") //Key = 1
       .append("<option>John</option>") //Key = 32
       .append("<option>Paul</option>") //Key = 423

¿Cómo se debe almacenar y recuperar la clave?

La identificación puede ser un lugar correcto, pero no se garantizaría que sea única si tuviera varios valores compartidos de selección (y otros escenarios).

Gracias

y en el espíritu de TMTOWTDI.

$option = $("<option></option>");
$select = $("<select></select>");
$select.addOption = function(value,text){
    $(this).append($("<option/>").val(value).text(text));
};

$select.append($option.val(1).text("Jason").clone())
       .append("<option value=32>John</option>")
       .append($("<option/>").val(423).text("Paul"))
       .addOption("321","Lenny");

Answer 1

Como dijo Lucas, el atributo de valor es lo que necesitas.Usando su código, se vería así (agregué un atributo de identificación a la selección para que encaje):

$select = $('<select id="mySelect"></select>');
$select.append('<option value="1">Jason</option>') //Key = 1
   .append('<option value="32">John</option>') //Key = 32
   .append('<option value="423">Paul</option>') //Key = 423

jQuery te permite obtener el valor usando el método val().Al usarlo en la etiqueta de selección, obtiene el valor de la opción seleccionada actualmente.

$( '#mySelect' ).val(); //Gets the value for the current selected option

$( '#mySelect > option' ).each( function( index, option ) {
    option.val(); //The value for each individual option
} );

Por si acaso, el método .each recorre cada elemento que coincida con la consulta.

Answer 2

El HTML <option> La etiqueta tiene un atributo llamado "valor", donde puede almacenar su clave.

p.ej.:

<option value=1>Jason</option>

No sé cómo funcionará esto con jQuery (no lo uso), pero espero que sea útil de todos modos.

Answer 3

Si está utilizando HTML5, puede utilizar un atributo de datos personalizados.Se vería así:

$select = $("<select></select>");
$select.append("<option data-key=\"1\">Jason</option>") //Key = 1
   .append("<option data-key=\"32\">John</option>") //Key = 32
   .append("<option data-key=\"423\">Paul</option>") //Key = 423

Luego, para obtener la clave seleccionada, podrías hacer:

var key = $('select option:selected').attr('data-key');

O si está utilizando XHTML, puede crear un espacio de nombres personalizado.

Dado que usted dice que las claves se pueden repetir, usar el atributo de valor probablemente no sea una opción, ya que entonces no podrá saber cuál de las diferentes opciones con el mismo valor se seleccionó en la publicación del formulario.