JQuery का उपयोग करके ड्रॉपडाउन के चयनित सूचकांक को सेट करें


165

मैं jQuery में एक ड्रॉपडाउन का सूचकांक कैसे सेट कर सकता हूं अगर मैं जिस तरह से नियंत्रण पा रहा हूं वह इस प्रकार है:

$("*[id$='" + originalId + "']") 

मैं इसे इस तरह से करता हूं क्योंकि मैं गतिशील रूप से नियंत्रण बना रहा हूं और चूंकि वेब प्रपत्रों का उपयोग करते समय आईडी बदल दिए जाते हैं, इसलिए मैंने इसे कुछ नियंत्रणों को खोजने के लिए एक काम के रूप में पाया। लेकिन एक बार मेरे पास jQuery ऑब्जेक्ट है, मुझे नहीं पता कि चयनित इंडेक्स को 0 (शून्य) पर कैसे सेट किया जाए।

जवाबों:


352

सबसे पहले - यह चयनकर्ता बहुत धीमा है। यह आईडी की तलाश करने वाले प्रत्येक DOM तत्व को स्कैन करेगा। यह एक प्रदर्शन हिट से कम होगा यदि आप तत्व को एक वर्ग असाइन कर सकते हैं।

$(".myselect")

हालांकि आपके प्रश्न का उत्तर देने के लिए, jQuery में चुनिंदा तत्वों के मूल्य को बदलने के कुछ तरीके हैं

// sets selected index of a select box to the option with the value "0"
$("select#elem").val('0'); 

// sets selected index of a select box to the option with the value ""
$("select#elem").val(''); 

// sets selected index to first item using the DOM
$("select#elem")[0].selectedIndex = 0;

// sets selected index to first item using jQuery (can work on multiple elements)
$("select#elem").prop('selectedIndex', 0);

इसे करने का कोई बेहतर तरीका है? मुझे लगा कि यह आईडी से मिलान करने के लिए पूरे डोम को स्कैन करेगा, लेकिन जब से मैं jQuery के लिए नया हूं तो मुझे लगा, चलो इसे काम करते हैं और फिर देखते हैं कि क्या यह करने का एक बेहतर तरीका है। किसी भी सलाह की सराहना की जाएगी।
ओज़।

हां - यदि आप उस तत्व को वर्ग को असाइन कर सकते हैं, जिसे आपको खोजने की आवश्यकता है, तो यह बहुत तेज चयनकर्ता होगा।
गर्नफ

@gnarf तेजी से आईडी नहीं हैं?
केबीएन

#an-idतेजी से है, लेकिन *[id$=ends-with]जिस तरह से धीमी है, "तत्व को एक वर्ग असाइन करें" का अर्थ है
अर्थार्त

यदि मेरे पास कई ASP.net DropDownList हैं, तो अलग-अलग चयनित सूचकांक मूल्य के साथ कैसे?
SearchForKnowledge

106

बस यह मिला, यह मेरे लिए काम करता है और मुझे व्यक्तिगत रूप से पढ़ना आसान लगता है।

यह वास्तविक सूचकांक को gnarf के उत्तर संख्या 3 विकल्प की तरह सेट करेगा।

// sets selected index of a select box the actual index of 0 
$("select#elem").attr('selectedIndex', 0);

यह काम नहीं करता था, लेकिन अब करता है ... बग देखें: http://dev.jquery.com/ticket/1474

परिशिष्ट

टिप्पणियों के उपयोग में अनुशंसित:

$("select#elem").prop('selectedIndex', 0);


30
और jQuery 1.6 के रूप में .prop('selectedIndex', 0);अगर आप .attr()काम करता है या नहीं :) की परवाह किए बिना उपयोग किया जाना चाहिए :)
gnarf

1
सही है, यह वास्तव में 1.7 में काम नहीं कर सकता है। स्वीकृत उत्तर देखें: stackoverflow.com/questions/8010664/…
4imble

परिशिष्ट के लिए +1। इस मुद्दे के कारण मेरा पुराना कोड टूट गया
BiLaL

11

मैं यह उत्तर २०१५ में लिख रहा हूं, और किसी कारण से (शायद jQuery के पुराने संस्करणों में) किसी भी अन्य उत्तर ने मेरे लिए काम नहीं किया है। मेरा मतलब है, वे चयनित सूचकांक को बदलते हैं, लेकिन यह वास्तव में वास्तविक गिरावट पर प्रतिबिंबित नहीं करता है।

यहाँ सूचकांक को बदलने का एक और तरीका है, और वास्तव में इसे ड्रॉपडाउन में दर्शाया गया है:

$('#mydropdown').val('first').change();

1
आपके उत्तर के लिए धन्यवाद। मेरे लिए केवल यही उत्तर काम कर रहा है
विराज धमाल

इसके अलावा 2015 में, मुझे prop('selectedIndex', ...);चयन बदलने के साथ (क्रोम और फ़ायरफ़ॉक्स के साथ परीक्षण) में कोई समस्या नहीं है ।
लम्ब्रेट

2
इसके लायक क्या है, यह ध्यान दिया जाना चाहिए कि आप यहां अलग कर रहे हैं changeड्रॉप-डाउन पर एक घटना शुरू हो रही है , जो उन लोगों के लिए एक उपयोगी फिक्स / वर्कअराउंड भी हो सकता है, जो कॉल करके चयन बदल रहे हैं prop('selectedIndex', ...), बजाय val(...)। शायद समस्या यह थी कि आप एक changeघटना के लिए सुन रहे हैं , और क्या आप के लिए काम नहीं कर रहा था? यह सच है कि बस prop
इरेटी

9

मैं उपयोग कर रहा हूँ

$('#elem').val('xyz');

उस विकल्प तत्व का चयन करें जिसका मूल्य = 'xyz' है


9

JQuery कोड:

$("#sel_status").prop('selectedIndex',1);

Jsp कोड:

Status:
<select name="sel_status"
    id="sel_status">
    <option value="1">-Status-</option>
    <option>ALL</option>
    <option>SENT</option>
    <option>RECEIVED</option>
    <option>DEACTIVE</option>
</select>

3

आप चुनिंदा तत्व में पहले विकल्प के मूल्य को हथियाना चाहते हैं।

$("*[id$='" + originalId + "']").val($("*[id$='" + originalId + "'] option:first").attr('value'));

3

दूसरा विकल्प चुनने के लिए

$('#your-select-box-id :nth-child(2)').prop('selected', true);

यहां हम घटना को आग बनाने के लिए `ट्रिगर ('परिवर्तन') जोड़ते हैं।

$('#your-select-box-id :nth-child(2)').prop('selected', true).trigger('change');

यह एक बेहतर जवाब है।
बेन देहघन


हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.