Hou sleutel waarde pare saam in HTML met jQuery?

Question

Gegewe 'n uitgesoekte met verskeie opsie in jQuery.

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

Hoe moet die sleutel gestoor word en opgespoor?

Die ID kan 'n OK plek wees, maar sal nie uniek gewaarborg as ek verskeie uitgesoekte se deel waardes (en ander scenario's).

Dankie

en in die gees van 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

Soos Lucas het gesê die waarde kenmerk is wat jy nodig het. Gebruik jou kode sal dit soos volg lyk (Ek het bygevoeg 'n ID-kenmerk om die kies om dit te laat inpas):

$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 kan jy die waarde kry met behulp van die metode val (). Deur dit te gebruik op die kies tag jy die huidige gekose opsie se waarde te kry.

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

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

Net in geval, die .each metode lusse gedink elke element van die navraag ooreenstem.

Answer 2

Die HTML <option> tag het 'n kenmerk genaamd "waarde", waar jy jou sleutel kan stoor.

Bv:.

<option value=1>Jason</option>

Ek weet nie hoe dit sal speel met jQuery (Ek gebruik dit nie), maar ek hoop dit is nuttig nietemin.

Answer 3

As jy 'HTML5, kan jy 'n persoonlike data kenmerk . Dit sal lyk soos volg:

$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

Toe die gekose sleutel wat jy kan doen kry:

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

Of as jy 'XHTML, dan kan jy 'n persoonlike namespace skep.

Omdat jy sê die sleutels kan herhaal, met behulp van die waarde kenmerk is waarskynlik nie 'n opsie sedertdien sou jy nie in staat wees om te vertel watter een van die verskillende opsies met dieselfde waarde is gekies op die vorm post.