Conserver les paires clé-valeur ensemble en HTML <select/> avec jQuery ?

Question

Étant donné une sélection avec plusieurs options dans jQuery.

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

Comment la clé doit-elle être stockée et récupérée ?

L'ID peut être un endroit correct, mais ne serait pas garanti unique si j'avais plusieurs valeurs de partage de sélection (et d'autres scénarios).

Merci

et dans l'esprit 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

Comme Lucas l'a dit, l'attribut value est ce dont vous avez besoin.En utilisant votre code, cela ressemblerait à ceci (j'ai ajouté un attribut id au select pour l'adapter) :

$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 vous permet d'obtenir la valeur en utilisant la méthode val().En l'utilisant sur la balise select, vous obtenez la valeur de l'option actuellement sélectionnée.

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

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

Juste au cas où, la méthode .each parcourt chaque élément auquel la requête correspond.

Answer 2

Le HTML <option> La balise a un attribut appelé "valeur", où vous pouvez stocker votre clé.

par exemple.:

<option value=1>Jason</option>

Je ne sais pas comment cela va fonctionner avec jQuery (je ne l'utilise pas), mais j'espère néanmoins que cela sera utile.

Answer 3

Si vous utilisez HTML5, vous pouvez utiliser un attribut de données personnalisé.Cela ressemblerait à ceci :

$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

Ensuite, pour obtenir la clé sélectionnée, vous pouvez faire :

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

Ou si vous utilisez XHTML, vous pouvez créer un espace de noms personnalisé.

Puisque vous dites que les clés peuvent se répéter, l'utilisation de l'attribut value n'est probablement pas une option, car vous ne seriez alors pas en mesure de savoir laquelle des différentes options avec la même valeur a été sélectionnée dans la publication du formulaire.