ड्रॉपडाउन विकल्प का चयन करने के लिए jQuery का उपयोग कैसे करें?

Question

मैं सोच रहा था कि <option>ड्रॉपडाउन बॉक्स में, 4 आइटम का चयन करने के लिए jQuery प्राप्त करना संभव है ?

<select>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
</select>

मैं चाहता हूं कि उपयोगकर्ता एक लिंक पर क्लिक करें, फिर <select>बॉक्स में अपना मूल्य बदल दें, जैसे कि उपयोगकर्ता ने इसे क्लिक करके चुना है <option>।

Comments

क्या आपके विकल्पों का कोई मूल्य है?

— विक्टर

Answer 1

कैसा रहेगा

$('select>option:eq(3)').attr('selected', true);

उदाहरण http://www.jsfiddle.net/gaby/CWvwn/ पर

---

jquery के आधुनिक संस्करणों के लिए आपको .prop()इसके बजाय का उपयोग करना चाहिए.attr()

$('select>option:eq(3)').prop('selected', true);

http://jsfiddle.net/gaby/CWvwn/1763/ पर उदाहरण

Comments

imo यह भी काम नहीं करना चाहिए; किसी विकल्प की चयनित स्थिति को इसके बजाय स्वयं की स्थिति को बदलकर ट्रिगर किया जाना चाहिए :)

— Ja͢ck

selectElement.selectedIndex = index;जैक का मतलब क्या है।

— rlemon

@rlemon, मुझे समझ में आता है, लेकिन गुणनखंड का selectedIndexउपयोग होने पर एकाधिक चयन के लिए उपयोग नहीं किया जा सकता multipleहै। और चयनित तत्वों को सेट करने का सामान्य ( html ) तरीका तत्वों की selectedविशेषता है option।

— गेब्रियल पेट्रीओली

@ GabyakaG.Petrioli सामान्य तरीका वास्तव selectedमें प्रत्येक संबंधित optionsतत्व की संपत्ति को true(और वैकल्पिक रूप से शेष को falseस्पष्ट करने के लिए ) सेट करना है। एकाधिक चयन वास्तव में बहुत बुरा है :)

— 18

onchangeजब मान को प्रोग्रामेटिक रूप से बदला जाता है तो @sunnyiitkgp इवेंट कभी ट्रिगर नहीं होता है। आप .trigger('change')इस घटना को आग लगाने के लिए अंत में जोड़ सकते हैं ( हालांकि यह वास्तव में बदले हुए मूल्य की परवाह किए बिना आग

— लगाएगा

Answer 2

समाधान:

$("#element-id").val('the value of the option');

Comments

यह selectedHTML में विकल्प सेट नहीं करता है ।

— अहमद हमजा

Answer 3

HTML चुनिंदा तत्वों में एक selectedIndexसंपत्ति होती है जिसे किसी विशेष विकल्प को चुनने के लिए लिखा जा सकता है:

$('select').prop('selectedIndex', 3); // select 4th option

सादे जावास्क्रिप्ट का उपयोग करके इसे प्राप्त किया जा सकता है:

// use first select element
var el = document.getElementsByTagName('select')[0]; 
// assuming el is not null, select 4th option
el.selectedIndex = 3;

Comments

यह स्वीकृत उत्तर होना चाहिए ... यह सबसे पवित्र और सबसे साफ समाधान की तरह दिखता है ...

— Denys Séguret

समस्या यह है कि यह 'ऑन्चेंज' इवेंट को फायर नहीं करता है।

— गाय कोरलैंड

@GuyKorland यह या तो अन्य उत्तरों के साथ होता है, यहाँ प्रदर्शित किया गया ; यदि आप आग लगने की घटना चाहते हैं, तो आपको इसे मैन्युअल रूप से करना होगा।

— जेक

@ जैक क्या कोई छोटा रास्ता है? एकमात्र तरीका मैंने पाया: var fireEvent = function (selectElement) {if (selectElement) {if ("selectElement में" fireEvent) {selectElement.fireEvent ("onchange"); } और {var evt = document.createEvent ("HTMLEvents"); evt.initEvent ("परिवर्तन", गलत, सच); selectElement.dispatchEvent (evt); }}}

— गाइ कोरलैंड

@GuyKorland jQuery .trigger()उस के लिए उजागर करता है, लेकिन जब से आप पहले से ही कोड के साथ ऐसा कर रहे हैं, तो स्वयं को परिवर्तन करने वाले गेंदबाज भी कॉल करना आसान होगा।

— जाक

Answer 4

मैं इसे इस तरह से करूंगा

 $("#idElement").val('optionValue').trigger('change');

Comments

यह चयनित उत्तर होना चाहिए

— उझुमकी नारुतो

$ ("# idElement")। वैल ('विकल्पवैल्यू')। परिवर्तन () भी काम कर सकता है

— उल्लुल्लू

Answer 5

यदि आपके विकल्पों का मूल्य है, तो आप यह कर सकते हैं:

$('select').val("the-value-of-the-option-you-want-to-select");

'सिलेक्ट' आपके सेलेक्ट या क्लास सिलेक्टर की आईडी होगी। या यदि कोई एक चयन है, तो आप टैग का उपयोग कर सकते हैं जैसा कि उदाहरण में है।

Comments

ठीक वैसा ही जैसा मुझे चाहिए था। धन्यवाद।

— chapman84

Answer 6

सबसे आसान तरीका val(value)कार्य है:

$('select').val(2);

और चयनित मूल्य प्राप्त करने के लिए आप कोई तर्क नहीं देते हैं:

$('select').val();

इसके अलावा, यदि आपके पास है <option value="valueToSelect">...</option>, तो आप कर सकते हैं:

$('select').val("valueToSelect");

डेमो

Comments

$ भी काम किया ('# SelectCtrlId')। वैल ('ValueToSelect');

— साई

Answer 7

यदि आप किसी विशिष्ट मान वाले विकल्प का चयन करना चाहते हैं, तो निम्न कोड का उपयोग करें:

$('select>option[value="' + value + '"]').prop('selected', true);

Comments

$ ( 'चुनें') वैल (मान)। इतने गंभीर क्यों हो? ;)

— जीशान

@Zee उत्तर कोड कई चयनों को भी अनुमति देता है।

— अज़्घनवी

Answer 8

 Try with the below codes. All should work. 
    $('select').val(2);
    $('select').prop('selectedIndex', 1);
    $('select>option[value="5"]').prop('selected', true);
    $('select>option:eq(3)').attr('selected', 'selected');
    $("select option:contains(COMMERCIAL)").attr('selected', true);

Answer 9

मैं nth-child () से eq () को प्राथमिकता देता हूं क्योंकि यह 0-आधारित के बजाय 1-आधारित इंडेक्सिंग का उपयोग करता है, जो मेरे मस्तिष्क पर थोड़ा आसान है।

//selects the 2nd option
$('select>option:nth-child(2)').attr('selected', true);

Comments

तारीखों के साथ चीजों में हेरफेर करते समय "1-आधारित सूचकांक" बेहतर होता है। मुझे बहुत तकलीफों से बचाता है। धन्यवाद।

— TCB13

Answer 10

'' तत्व के साथ आमतौर पर हम 'वैल्यू' की विशेषता का उपयोग करते हैं। फिर इसे सेट करना आसान हो जाएगा:

$('select').val('option-value');

Answer 11

इसे इस्तेमाल करे:

$('#mySelectElement option')[0].selected = true;

सादर!

Answer 12

आईडी के साथ उत्तर दें:

$('#selectBoxId').find('option:eq(0)').attr('selected', true);

Answer 13

 $('select>option:eq(3)').attr('selected', 'selected');

यहां एक चेतावनी यह है कि यदि आपके पास चयन / विकल्प की परिवर्तन घटना के लिए जावास्क्रिप्ट देखना है तो आपको .trigger('change')कोड जोड़ने की आवश्यकता है ।

 $('select>option:eq(3)').attr('selected', 'selected').trigger('change');

क्योंकि केवल कॉल .attr('selected', 'selected')करने से ईवेंट ट्रिगर नहीं होता है