JQuery के साथ HTML <select/> में मुख्य मूल्य जोड़ों को एक साथ रखते हुए?

Question

JQuery में एकाधिक विकल्प के साथ चयन को देखते हुए।

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

कुंजी को कैसे संग्रहीत और पुनर्प्राप्त किया जाना चाहिए?

आईडी एक ठीक जगह हो सकती है लेकिन अगर मेरे पास एकाधिक चयन के साझा मूल्य (और अन्य परिदृश्य) थे तो अद्वितीय नहीं होगा।

धन्यवाद

और 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

लुकास ने कहा कि मूल्य विशेषता आपको चाहिए। अपने कोड का उपयोग यह कुछ इस तरह दिखेगा (मैं जोड़ा एक आईडी का चयन करने के लिए विशेषता यह फिट बनाने के लिए):

$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 आप वैल() पद्धति का उपयोग करके मूल्य प्राप्त करने देता है। चयन टैग पर इसका उपयोग करके आपको वर्तमान चयनित विकल्प का मूल्य मिलता है।

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

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

बस मामले में, प्रत्येक विधि क्वेरी से मेल खाने वाले प्रत्येक तत्व के माध्यम से .each विधि loops।

Answer 2

एचटीएमएल <option> टैग एक विशेषता "मूल्य" कहा जाता है, जहां आप अपने कुंजी स्टोर कर सकते हैं है।

उदा .:

<option value=1>Jason</option> 

मैं कैसे इस (मैं उसका उपयोग नहीं करते) jQuery के साथ खेलेंगे पता नहीं है, लेकिन मुझे उम्मीद है कि इस फिर भी उपयोगी है।

Answer 3

यदि आप HTML5 का उपयोग कर रहे हैं, तो आप custom data attribute का उपयोग कर सकते हैं। यह इस तरह दिखेगा:

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

या यदि आप एक्सएचटीएमएल उपयोग कर रहे हैं, तो आप एक कस्टम नाम स्थान बना सकते हैं:

$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 

तब चयनित कुंजी तुम कर सकते हो पाने के लिए।

चूंकि आप कहते हैं कि चाबियाँ दोहरा सकती हैं, मान विशेषता का उपयोग करना शायद एक विकल्प नहीं है, तब से आप यह बताने में सक्षम नहीं होंगे कि फ़ॉर्म पोस्ट पर उसी मूल्य के साथ कौन से अलग-अलग विकल्पों का चयन किया गया था।