Schlüsselwertpaare in HTML <select/> mit jQuery zusammenhalten?

Question

Gegeben eine Auswahl mit mehreren Optionen in jQuery.

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

Wie soll der Schlüssel gespeichert und abgerufen werden?

Die ID ist möglicherweise ein OK-Ort, wäre aber nicht garantiert eindeutig, wenn ich mehrere gemeinsame Werte für die Auswahl hätte (und andere Szenarien).

Danke

und im Sinne von 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

Wie Lucas sagte, ist das Wertattribut das, was Sie brauchen.Mit Ihrem Code würde es ungefähr so ​​aussehen (ich habe der Auswahl ein ID-Attribut hinzugefügt, damit es passt):

$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

Mit jQuery können Sie den Wert mithilfe der Methode val() ermitteln.Wenn Sie es auf das Select-Tag anwenden, erhalten Sie den Wert der aktuell ausgewählten Option.

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

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

Für alle Fälle durchläuft die .each-Methode jedes Element, mit dem die Abfrage übereinstimmt.

Answer 2

Der HTML <option> Tag hat ein Attribut namens „value“, in dem Sie Ihren Schlüssel speichern können.

z.B.:

<option value=1>Jason</option>

Ich weiß nicht, wie das mit jQuery funktioniert (ich verwende es nicht), aber ich hoffe, dass es trotzdem hilfreich ist.

Answer 3

Wenn Sie HTML5 verwenden, können Sie a verwenden benutzerdefiniertes Datenattribut.Es würde so aussehen:

$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

Um den ausgewählten Schlüssel zu erhalten, können Sie dann Folgendes tun:

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

Wenn Sie XHTML verwenden, können Sie auch einen benutzerdefinierten Namespace erstellen.

Da Sie sagen, dass sich die Schlüssel wiederholen können, ist die Verwendung des Wertattributs wahrscheinlich keine Option, da Sie dann nicht erkennen können, welche der verschiedenen Optionen mit demselben Wert im Formularbeitrag ausgewählt wurde.