JQuery का उपयोग कर विकल्पों का चयन करने के लिए अतिरिक्त डेटा जोड़ना

Question

बहुत ही सरल प्रश्न मुझे आशा है।

मेरे पास इस तरह का सामान्य <select>बॉक्स है

<select id="select">
    <option value="1">this</option>
    <option value="2">that</option>
    <option value="3">other</option>
</select>

मैं चयनित मूल्य (उपयोग करके $("#select").val()) और चयनित आइटम के प्रदर्शन मूल्य ( उपयोग करके ) प्राप्त कर सकता हूं $("#select :selected").text()।

लेकिन मैं <option>टैग में एक अतिरिक्त मूल्य की तरह कैसे स्टोर कर सकता हूं ? मैं ऐसा कुछ करने में सक्षम होना चाहूंगा <option value="3.1" value2="3.2">other</option>और value2विशेषता का मूल्य प्राप्त कर सकता हूं (जो उदाहरण में 3.2 होगा)।

Comments

आप चयन बॉक्स में एक आइटम जोड़ना चाहते हैं? या आप एक समय में एक से अधिक का चयन करने और परिणाम प्राप्त करने में सक्षम होना चाहते हैं?

— zsalzbank

नहीं, मैं चाहता हूं कि वहाँ <value> टैग में value2 = "" जैसा हो, लेकिन वह काम नहीं करता है

— jim smith

आपका प्रश्न स्पष्ट नहीं है (मेरे लिए, किसी भी तरह)। "चुनिंदा विकल्पों में एक और मूल्य संग्रहीत करें" से आपका क्या मतलब है? क्या आपका मतलब है कि आप चयन के लिए एक नया विकल्प जोड़ना चाहते हैं, जो खोला जाने पर उपयोगकर्ता को दिखाई देगा?

— फ़िरोज़

तर्क या कारण की अवहेलना नहीं करता, geez मेरे पास एक समान प्रश्न / मामला है इसलिए मैं चयनों के बीच के मूल्यों की तुलना कर सकता हूं और उस विकल्प के मान / ग्रंथों को बनाए रखते हुए दूसरे के विकल्पों पर पाठ के विकल्पों को बचा सकता हूं, एक तरीका यह संभव है कि डेटा के माध्यम से नीचे दिए गए उत्तर के रूप में इंगित करता है। सिर्फ इसलिए कि आप इसके बारे में नहीं सोचते थे इसका मतलब यह नहीं है कि यह तर्क और कारण को परिभाषित करता है। ओपी एक सभ्य पर्याप्त प्रश्न था जिसे वह सिर्फ सही दिशा में इंगित करने के लिए आवश्यक था, स्मॉग का एक बड़ा गिलास नहीं मिला।

— user1783229

आप डेटा-कुछ का उपयोग करके और .data ('कुछ भी') का उपयोग करके जहां भी आप एक अतिरिक्त कार्य करेंगे, वहां हमेशा अतिरिक्त पैरामीटर जोड़ सकते हैं। मान के लिए या अपनी पसंद के समान कुछ भी स्वैप करें

Answer 1

HTML मार्कअप

<select id="select">
  <option value="1" data-foo="dogs">this</option>
  <option value="2" data-foo="cats">that</option>
  <option value="3" data-foo="gerbils">other</option>
</select>

कोड

// JavaScript using jQuery
$(function(){
    $('select').change(function(){
       var selected = $(this).find('option:selected');
       var extra = selected.data('foo'); 
       ...
    });
});

// Plain old JavaScript
var sel = document.getElementById('select');
var selected = sel.options[sel.selectedIndex];
var extra = selected.getAttribute('data-foo');

इसे यहां jQuery का उपयोग करते हुए एक कार्यशील नमूने के रूप में देखें : http://jsfiddle.net/GsdCj/1/
इसे यहां सादे जावास्क्रिप्ट का उपयोग करते हुए एक कार्यशील नमूने के रूप में देखें: http://jsfiddle.net/GsdCj/2/

एचटीएमएल 5 से डेटा विशेषताओं का उपयोग करके, आप सिंटैक्टिक रूप से मान्य तरीके से तत्वों में अतिरिक्त डेटा जोड़ सकते हैं जो कि jQuery से भी आसानी से सुलभ है।

Comments

@ जिस्मिथ हाँ, यह होगा। (आप इन उत्तरों उपयोगी के किसी भी मिल जाए, तो आप उन्हें वोट करना चाहिए तुम भी रूप में "स्वीकार किए जाते हैं" आप पाया है कि यह सबसे अच्छा आपके समस्या हल एक निशान चाहिए।।)

— Phrogz

क्या? नहीं, यह नहीं होगा। यह उन सभी ब्राउज़रों में काम करेगा जो HTML5 डेटा विशेषताओं का समर्थन करते हैं।

— ग्लोमैड

@ithcy सभी ब्राउज़र (और 10+ वर्ष के लिए) मार्कअप में "अमान्य" विशेषताओं का समर्थन करते हैं, और उन्हें DOM के माध्यम से प्राप्त / सेट करते हैं। HTML5 "डेटा" विशेषताएँ एक नामकरण योजना और एक नए मानक के साथ सिर्फ कस्टम विशेषताएँ हैं जो उन्हें कानूनी घोषित करती हैं।

— फ़रोज़

@Phrogz मुझे यह पता है। यह ब्राउज़रों की अवैध विशेषताओं का "समर्थन" करने की बात नहीं है, बल्कि उन्हें अनदेखा करने का मामला है। उपयोग करने योग्य वेब ब्राउज़र लिखने के लिए वास्तव में कोई अन्य तरीका नहीं है :) हालांकि मुझे लगता है कि यह डेटा विशेषताओं को "वाक्यविन्यास रूप से मान्य" कहने के लिए एक खिंचाव है - यह आपके संदर्भ पर निर्भर करता है। यदि आपके पास HTML5 सिद्धांत है, तो हाँ, वे मान्य हैं। अन्यथा वे नहीं हैं और W3C सत्यापन विफल होने का कारण होगा।

— ग्लोमैड

@ithcy ब्राउज़रों ने उन्हें अनदेखा कर दिया क्योंकि वे उनके साथ कुछ खास नहीं करते हैं, लेकिन वे उन्हें इस बात के लिए अनदेखा नहीं करते क्योंकि वे पूरी तरह से उपलब्ध हैं getAttribute()। मैं आपके प्रारंभिक दावे का जवाब दे रहा था कि मेरा उत्तर सभी ब्राउज़रों में काम नहीं करेगा। मैं अपने बयान के साथ खड़ा हूं कि यह 'सभी' ब्राउज़रों (इस मामले में 'सभी' की एक बहुत उदार परिभाषा के लिए) में काम करेगा। मुझे एक ब्राउज़र दिखाएं जो jQuery का समर्थन करता है, लेकिन इन डेटा विशेषताओं के साथ काम नहीं करता है - यहां तक ​​कि एक गैर- HTML5 सिद्धांत के साथ - और मैं अपने शब्दों को खाऊंगा।

— फोग्र्ज

Answer 2

मेरे लिए, ऐसा लगता है कि आप एक नई विशेषता बनाना चाहते हैं? क्या तुम चाहते हो

<option value="2" value2="somethingElse">...

ऐसा करने के लिए, आप कर सकते हैं

$(your selector).attr('value2', 'the value');

और फिर इसे पुनः प्राप्त करने के लिए, आप उपयोग कर सकते हैं

$(your selector).attr('value2')

यह मान्य कोड नहीं है, लेकिन मुझे लगता है कि यह काम करता है।

Comments

अन्य विधि $ (चयनकर्ता) .डेटा ('value2', "आपका मान") और $ (चयनकर्ता) .data ('value2') का उपयोग करने के लिए है ... जो अभी भी मान्य है।

— mikesir87

ठीक है, यह मूल मार्कअप में गैर-मानक विशेषताओं के लिए सिंथेटिक रूप से मान्य नहीं होगा, लेकिन क) मैंने कभी भी किसी भी ब्राउज़र को नहीं देखा है क्योंकि एनएस 4 के दिनों में इसके साथ कोई समस्या नहीं है, और बी) यदि आप डोम को संशोधित कर सकते हैं। "सिंटैक्टिकली अमान्य" है कि कुछ का उत्पादन करने के लिए, क्या यह वास्तव में है?

— फ्रॉग्ज

हां, यह वास्तव में है ... अमान्य है। जब डेटा- * गुण HTML5 मानक में परिभाषित किए गए हैं तो मनमाने गुणों का उपयोग क्यों करें।

— स्टीफनबेयर

जैसा कि @stephenbayer उल्लेख करता है ... ऐसा करने का सही तरीका अब html5 समर्थित डेटा- * गुणों का उपयोग कर रहा है। मूल रूप से 2010 में वापस जवाब दिए जाने पर वे गुण वास्तव में आस-पास / भारी उपयोग में नहीं थे :)

— mikesir87

Answer 3

मैंने दो उदाहरण दिए हैं जो मुझे लगता है कि आपका प्रश्न हो सकता है:

http://jsfiddle.net/grdn4/

अतिरिक्त मान संग्रहीत करने के लिए इसे देखें। यह अन्य मानों को संग्रहीत करने के लिए डेटा विशेषताओं का उपयोग करता है:

http://jsfiddle.net/27qJP/1/

Answer 4

HTML / JSP मार्कअप:

<form:option 
data-libelle="${compte.libelleCompte}" 
data-raison="${compte.libelleSociale}"   data-rib="${compte.numeroCompte}"                              <c:out value="${compte.libelleCompte} *MAD*"/>
</form:option>

जैकी कोड: घटना: परिवर्तन

var $this = $(this);
var $selectedOption = $this.find('option:selected');
var libelle = $selectedOption.data('libelle');

एक तत्व libelle.val () या libelle.text () करने के लिए

Comments

<form: विकल्प data-libelle-compte = "$ {compte.libelle} data-raison =" $ {compte.raison} "data-compte =" $ {compte.numero} "> <c: out value =" $ {} compte.libelleCompte MAD "/> </ प्रपत्र: विकल्प>

— Fadid

Answer 5

चुनिंदा विकल्पों में एक और मूल्य संग्रहीत करने के लिए:

$("#select").append('<option value="4">another</option>')