JQuery के साथ चयनित <select> का पहला विकल्प कैसे बनाएं

546

मैं jQuery के साथ चयनित का पहला विकल्प कैसे बनाऊं?

<select id="target">
  <option value="1">...</option>
  <option value="2">...</option>
</select>

jquery select

— हे भगवान
स्रोत

955

$("#target").val($("#target option:first").val());

— डेविड एंड्रेस
स्रोत

362

यह ध्यान दिया जाना चाहिए कि यह अधिक आसानी से $ ("# लक्ष्य") [0] .selectedIndex = 0 के साथ किया जाता है;

— डेविड एंड्रेस

17

यह काम करता है, लेकिन यह 1 तत्व मूल्य पर आधारित है , अगर 1 तत्व में खाली मूल्य होता है, तो यह मूल्य के साथ निकटतम तत्व का चयन करेगा

— badReiko

2

IE6 को छोड़कर, शानदार काम करता है। 7-8 का अनिश्चित, 9. पर काम करता है

— निकोले

3

मैं अपने पिछले बयान को याद करता हूं, खुद से आगे निकल रहा था। $ ( "# लक्ष्य") वैल ( "विकल्प: पहले")।; हर जगह सबसे अधिक काम करता है लेकिन IE6 $ ("लक्ष्य")। val ($ ("# लक्ष्य विकल्प: पहला")। val ()); IE6 में काम करेगा, क्योंकि आप सचमुच पहले मूल्य को देख रहे हैं, और इसे लक्ष्य के मूल्य के रूप में दर्ज कर रहे हैं। एक के बजाय दो आईडी लुकअप करते हैं।

— निकोली

2

और यह वास्तव में IE6, 7, और 8. के लिए आवश्यक है। जबकि Whval ('विकल्प: पहला') IE9 (और सफारी और फ़ायरफ़ॉक्स और क्रोम और ओपेरा) में काम करता है।

— निकोली

178

आप यह कोशिश कर सकते हैं

$("#target").prop("selectedIndex", 0);

— Esben
स्रोत

2

यह सभी मामलों में ठीक से काम नहीं करता है। मेरे पास माता-पिता / बच्चे का कैस्केडिंग ड्रॉप डाउन है। माता-पिता # 1 का चयन करें, बच्चे # 1 प्रदर्शित करें, माता-पिता # 2 प्रदर्शन बच्चे # 2 का चयन करें। जब भी वे एक नए माता-पिता का चयन करते हैं तो उसे पहले विकल्प के लिए संबंधित बच्चे को वापस सेट करना चाहिए। यह समाधान ऐसा नहीं करता है। यह बच्चे के मेनू "चिपचिपा" को छोड़ देता है। विकल्प देखें: अधिक परिदृश्यों में काम करने वाले उत्तर के लिए इस प्रश्न पर चयनित। सर्प ('चयनित', गलत) / विकल्प: first.prop ('चयनित', 'चयनित') समाधान।

— लांस क्लीवलैंड

यह चालू इवेंट को चालू नहीं करता है। कम से कम क्रोम में।

— टॉमाज़ मूलरस्क

धन्यवाद! मेरे लिए काम करने वाले उत्तरों की सूची में यह पहला उत्तर है।

— केसी क्रुकस्टन

6

@ टॉमाज़$("#target").prop("selectedIndex", 0).change();

— mplungjan

@Romesh मैं सिलेक्टेडइंडेक्स बेस को वैल्यू पर कैसे सेट कर सकता हूं?

— जूनियर फ्रोगी

111

// remove "selected" from any options that might already be selected
$('#target option[selected="selected"]').each(
    function() {
        $(this).removeAttr('selected');
    }
);


// mark the first option as selected
$("#target option:first").attr('selected','selected');

— user149513
स्रोत

1

अच्छा दूसरा तरीका। कृपया चयनित विशेषता का मान जोड़ें। उदाहरण के लिए, attr ("चयनित", "चयनित")। इस अतिरिक्त पैरामीटर के बिना, चयन नहीं किया जाता है।

— डेविड एंड्रेस

@EgorPavlikhin - मैंने अभी तक किसी भी विकल्प से "चयनित" झंडे को हटाने के लिए JQuery कोड को शामिल करने के उत्तर को संपादित किया है जो शायद पहले से ही चुना गया है। अब उत्तर सही है :)

— jmort253

20

eachफ़ंक्शन की कोई आवश्यकता नहीं है , होना चाहिए: $('#target option[selected="selected"]').removeAttr('selected')अब इसके साथ removePropऔर propइसके बजाय का उपयोग किया जाना चाहिए ।

— vsync

इस सवाल पर जेम्स ली बेकर के जवाब का कहीं अधिक गहन संस्करण, हालांकि गणना चक्र शामिल हैं जो कि इंटरफ़ेस के अच्छी तरह से प्रबंधित होने पर आवश्यक नहीं हो सकता है।

— लांस क्लीवलैंड

65

जब आप उपयोग करते हैं

$("#target").val($("#target option:first").val());

यदि पहला विकल्प मान शून्य है, तो यह Chrome और Safari में काम नहीं करेगा।

मैं पसंद करता हूं

$("#target option:first").attr('selected','selected');

क्योंकि यह सभी ब्राउज़रों में काम कर सकता है।

— जिमी हुआंग
स्रोत

3

आपको अधिक मामलों में काम करने के लिए इसके लिए पहले से चयनित तत्वों को "अचयनित" करने की आवश्यकता है। विवरण के लिए जेम्स ली बेकर का उत्तर देखें।

— लांस क्लीवलैंड

44

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

JQuery के प्रोप मेथड का उपयोग स्पष्ट और आवश्यक विकल्प सेट करने के लिए करें:

$("#target option:selected").prop("selected", false);
$("#target option:first").prop("selected", "selected");

— जेम्स ली बेकर
स्रोत

3

उत्तम। मैं मेनू नीचे ड्रॉपिंग झरना है। जब कोई उपयोगकर्ता माता-पिता के विकल्प 2 का चयन करता है, तो बच्चा विकल्प 3 मैं नहीं चाहता कि वह "छड़ी" करे। दूसरे शब्दों में उपयोगकर्ता तब माता-पिता # 1 का चयन करता है, फिर माता-पिता # 2 का पुन: चयन करता है। जब ऐसा होता है, तो मैं चाहता हूं कि बच्चा मेनू पहले विकल्प पर रीसेट हो जाए (जो मेरे मामले में "कोई भी" है)। यहां अन्य सभी समाधान फ़ायरफ़ॉक्स v19 और लिनक्स पर क्रोम पर विफल हैं।

— लांस क्लीवलैंड

33

$("#target")[0].selectedIndex = 0;

— danactive
स्रोत

1

यह उन मामलों में काम नहीं करेगा जहां एक ड्रॉप डाउन में एक पूर्व-चयनित आइटम है। विवरण के लिए चयनित उत्तर पर मेरी टिप्पणी देखें।

— लांस क्लीवलैंड

21

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

अंत में .change () कॉल को चेंज करने से UI विजेट भी अपडेट हो जाएगा।

$("#target").val($("#target option:first").val()).change();

(ध्यान दें कि मैंने jQuery मोबाइल और क्रोम डेस्कटॉप पर एक बॉक्स का उपयोग करते समय इस पर ध्यान दिया था, इसलिए यह हर जगह नहीं हो सकता है)।

— ब्रैडली बोसार्ड
स्रोत

अंत में .change () कॉल को चेंज करने से UI विजेट भी अपडेट हो जाएगा।

— कोडमिरर

17

यदि आपके पास अक्षम विकल्प हैं, तो आप उन्हें चुनने से रोकने के लिए ([अक्षम]) नहीं जोड़ सकते हैं, जिसके परिणामस्वरूप निम्नलिखित हैं:

$("#target option:not([disabled]):first").attr('selected','selected')

— मेलानी
स्रोत

1

अक्षम विकल्पों के बारे में अच्छी बात है। प्रस्तुत उत्तरों के अलावा अच्छा लगा!

— लांस क्लीवलैंड

16

मूल्यों को रीसेट करने का एक और तरीका (कई चयनित तत्वों के लिए) यह हो सकता है:

$("selector").each(function(){

    /*Perform any check and validation if needed for each item */

    /*Use "this" to handle the element in javascript or "$(this)" to handle the element with jquery */

    this.selectedIndex=0;

});

— निक पेट्रोपोलोस
स्रोत

4

+1 यह वास्तव में एक अच्छा जवाब है, लेकिन आप इसे प्रश्न डोमेन के लिए और अधिक विशिष्ट बना सकते हैं; इसके बजाय $("selector")आप सिर्फ लिख सकते थे$('#target')

— Ja͢ck

7

सरल जैसे की वह:

$('#target option:first').prop('selected', true);

— रेमन श्मिट
स्रोत

1

यह बहुत बेहतर है

— अरुण प्रसाद ES

7

$('#newType option:first').prop('selected', true);

— FFFFFF
स्रोत

यह केवल तभी काम करता है जब पहले से ही चयनित विकल्प न हों। जेम्स ली बेकर का जवाब देखें।

— वेबर्स

6

मैंने पाया है कि अगर कोई पहले से ही चयनित विशेषता है तो बस चयनित एटर काम नहीं करता है। अब मैं जिस कोड का उपयोग करता हूं, वह पहले चयनित विशेषता को परेशान करेगा, फिर पहले विकल्प का चयन करें।

$('#target').removeAttr('selected').find('option:first').attr('selected', 'selected');

— फ्रांसिस लुईस
स्रोत

यह अच्छी तरह से काम करता है और जेम्स ली बेकर द्वारा इस प्रश्न पर कहीं और उल्लेख के जवाब के समान है। मुझे विकल्प के साथ अन्य उत्तर पसंद है: चयनित और विकल्प: पहले विकल्प के निष्पादन के रूप में: पहले खोजने () की तुलना में तेज़ (गणना-वार) होने की संभावना है।

— लांस क्लीवलैंड

5

हालांकि प्रत्येक फ़ंक्शन संभवतः आवश्यक नहीं है ...

$('select').each(function(){
    $(this).find('option:first').prop('selected', 'selected');
});

मेरे लिये कार्य करता है।

— डार्थ जॉन
स्रोत

5

यहाँ है कि मैं यह कैसे करेंगे:

$("#target option")
    .removeAttr('selected')
    .find(':first')     // You can also use .find('[value=MyVal]')
        .attr('selected','selected');

— फैब्रिजियो
स्रोत

1

यह अच्छी तरह से काम करता है और जेम्स ली बेकर द्वारा इस प्रश्न पर कहीं और उल्लेख के जवाब के समान है। मुझे विकल्प के साथ अन्य उत्तर पसंद है: चयनित और विकल्प: पहले विकल्प के निष्पादन के रूप में: पहले खोजने () की तुलना में तेज़ (गणना-वार) होने की संभावना है।

— लांस क्लीवलैंड

2

यह मेरे लिए अंत में एक ट्रिगर ('परिवर्तन') का उपयोग करके काम करता है, जैसे:

$("#target option:first").attr('selected','selected').trigger('change');

— पाब्लो एसजी पाचेको
स्रोत

2

यदि आप पहले विकल्प को डिफ़ॉल्ट की तरह उपयोग करने जा रहे हैं

<select>
    <option value="">Please select an option below</option>
    ...

तो आप बस का उपयोग कर सकते हैं:

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

यह अच्छा और सरल है।

— गैरी - आईटीबी
स्रोत

2

यह मेरे लिए काम किया!

$("#target").prop("selectedIndex", 0);

— अर्चना कामथ
स्रोत

1

जेम्स ली बेकर के उत्तर की पीठ पर, मैं इस समाधान को पसंद करता हूं क्योंकि यह ब्राउज़र समर्थन पर निर्भरता को हटाता है: पहले: चयनित ...

$('#target').children().prop('selected', false);
$($('#target').children()[0]).prop('selected', 'selected');

— मैथ्यू स्कॉट
स्रोत

1

मेरे लिए यह केवल तभी काम किया जब मैंने निम्नलिखित कोड जोड़ा:

.change();

मेरे लिए यह केवल तभी काम करता है जब मैंने निम्नलिखित कोड जोड़ा: जैसा कि मैं फ़ॉर्म को "रीसेट" करना चाहता था, अर्थात, प्रपत्र के सभी चयनों के सभी पहले विकल्पों का चयन करें, मैंने निम्नलिखित कोड का उपयोग किया:

$('form').find('select').each(function(){ $(this).val($("select option:first").val()); $(this).change(); });

— जीन डगलस
स्रोत

1

उपयोग:

$("#selectbox option:first").val()

कृपया इस JSFiddle में काम कर रहे सरल मिल ।

— चेतन
स्रोत

कैसे के बारे में स्थिति 15, 25, या विशिष्ट पाठ के साथ? : डी

— मार्सेलो एग्मोवेल

कॉलिंग .val()को सूची में पहले विकल्प का मूल्य मिलता है। यह वास्तव में पहला चयन नहीं करता है (चयनित करें), जैसा कि मूल प्रश्न में पूछा गया था।

— फनका

1

मेरे लिए, यह केवल तभी काम करता था जब मैंने कोड की निम्न पंक्ति जोड़ी थी

$('#target').val($('#target').find("option:first").val());

— मुहम्मद कासिम
स्रोत

0

$("#target").val(null);

क्रोम में ठीक काम किया

— कृष्ण मूर्ति
स्रोत

0

यदि आप चयनित तत्व का jQuery ऑब्जेक्ट स्टोर कर रहे हैं:

var jQuerySelectObject = $("...");

...

jQuerySelectObject.val(jQuerySelectObject.children().eq(0).val());

— डैनियल
स्रोत

0

ECMAScript 6 के साथ jQuery का उपयोग करके इस सर्वोत्तम दृष्टिकोण की जाँच करें :

$('select').each((i, item) => {
  var $item = $(item);
  $item.val($item.find('option:first').val()); 
});

— jdnichollsc
स्रोत

0

आप dropdownइसका उपयोग करके किसी भी विकल्प का चयन कर सकते हैं ।

// 'N' can by any number of option.  // e.g.,  N=1 for first option
$("#DropDownId").val($("#DropDownId option:eq(N-1)").val());

— अरसमान अहमद
स्रोत

0

$('select#id').val($('#id option')[index].value)

बदलें आईडी विशेष चयन टैग आईडी और साथ सूचकांक विशेष तत्व आप चयन करना चाहते हैं।

अर्थात

<select class="input-field" multiple="multiple" id="ddlState" name="ddlState">
                                        <option value="AB">AB</option>
                                        <option value="AK">AK</option>
                                        <option value="AL">AL</option>
</select>

तो यहाँ पहले तत्व चयन के लिए मैं निम्नलिखित कोड का उपयोग करूंगा:

$('select#ddlState').val($('#ddlState option')[0].value)

— हितेश कलवानी
स्रोत

-1

उपयोग:

alert($( "#target option:first" ).text());

— GobsYats
स्रोत