JQuery का उपयोग करके एक चयन बॉक्स पर पहला विकल्प कैसे सेट करें?

Question

मेरे पास दो HTML selectबॉक्स हैं। selectजब मैं दूसरे में चयन करता हूं तो मुझे एक बॉक्स रीसेट करना होगा।

<select id="name" >
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

<select id="name2" >
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

जब मैं पहले select(यानी id="name") के विकल्प का चयन करता हूं, तो मुझे दूसरे selectको रीसेट करने की आवश्यकता होती है select all; इसी तरह, जब मैं दूसरे select(यानी id="name2") के विकल्प का चयन करता हूं, तो मुझे पहले selectसे रीसेट करना होगा select all।

मैं उसे कैसे कर सकता हूँ?

Comments

मैंने शीर्षक [...] रीसेट [...] से [...] पर पहला विकल्प स्थापित किया [...] क्योंकि डिफ़ॉल्ट शुरू में लोड किए गए मान को सेट करने का अर्थ है

— पियरे डी LESPINAY

Answer 1

कुछ इस तरह करना चाहिए ट्रिक: https://jsfiddle.net/TmJCE/898/

$('#name2').change(function(){
    $('#name').prop('selectedIndex',0);
});


$('#name').change(function(){
    $('#name2').prop('selectedIndex',0);
});

Comments

सच है, लेकिन यह अभी भी मूल अवधारणा को दर्शाता है, और इस मामले में ऐसा लगता है कि वह इसे "सभी का चयन करें" पर रीसेट करना चाहता है, जो कि पहला विकल्प है।

— जैक

यदि आप किसी <button>तत्व से इसका उपयोग करते हैं , तो सेट न करें type="reset"। यह मेरे लिए तब तक काम नहीं आया जब तक मैंने टाइप नहीं कियाbutton

— कॉमन

मैं ड्रॉपडाउन के पहले तत्व का चयन करता हूं लेकिन टेक्स्ट अभी भी पुराना है।

— 18

मैं इसे बाकी चुनिंदा बॉक्स के रूप में उपयोग कर रहा हूं क्या यह ठीक है? या मैं इसे ठीक से नहीं कर रहा हूँ?

— अंकित सुथार

@ankitsuthar यह selectउपलब्ध कराए गए मूल्य के चयनित विकल्प को बदल देगा । select.prop('selectedIndex', 0)इसे पहला विकल्प रीसेट करेगा, select.prop('selectedIndex', 1)इसे दूसरे विकल्प पर सेट करेगा।

— जैक

Answer 2

यदि आप इसे पहले स्थान पर चुनिंदा तत्व को रीसेट करना चाहते हैं, तो सबसे सरल तरीका हो सकता है:

$('#name2').val('');

दस्तावेज़ में सभी चयनित तत्वों को रीसेट करने के लिए:

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

संपादित करें: नीचे दी गई टिप्पणी के अनुसार स्पष्ट करने के लिए, यह चुनिंदा तत्व को उसकी पहली रिक्त प्रविष्टि के लिए रीसेट करता है और केवल तभी जब सूची में कोई रिक्त प्रविष्टि मौजूद हो।

Comments

हाँ, यह लगभग हर समय काम करेगा। अन्य समाधानों में कभी-कभी समस्याएँ हो सकती हैं। वास्तव में सरल तरीका।

— स्वरुप शाक्य

बस एक चेतावनी: यह केवल तभी काम करेगा जब आप वास्तव में पहले विकल्प को चुनना चाहते हैं और पहले विकल्प में रिक्त का मान सेट है। यदि आपके पहले विकल्प में कुछ अन्य मूल्य हैं या यदि SELECT बॉक्स में कोई विकल्प रिक्त नहीं है, तो यह किसी भी परिवर्तन को प्रभावित नहीं करेगा। या, यदि किसी अन्य विकल्प में रिक्त का मान है, तो वह इसके बजाय उस विकल्प का चयन करेगा।

— HBlackorby

@Hlackorby, आपकी टिप्पणी सहायक थी, लेकिन 1) विकल्प value=""किसी भी क्रम में प्रकट हो सकता है। 2) एक मूल्य विशेषता के बिना एक विकल्प अर्थात <option></option>खाली स्ट्रिंग-मूल्य विशेषता वाले विकल्प के समान नहीं है <option value=""></option>, और आपने यह स्पष्ट कर दिया है कि हमें value="" भाग 3 की आवश्यकता है ) भले ही <option>खाली-स्ट्रिंग मान के साथ नहीं हों ; सेटिंग .val('')"परिवर्तन को प्रभावित करेगा", चयन रिक्त को बदलने के लिए दिखाई देगा, क्या यह सही नहीं है? कम से कम मेरे क्रोम में ...

— लाल मटर

Answer 3

जैसा कि @PierredeLESPINAY ने टिप्पणियों में बताया, मेरा मूल समाधान गलत था - यह ड्रॉपडाउन को सबसे ऊपरी विकल्प पर रीसेट कर देगा, लेकिन केवल इसलिए कि undefinedरिटर्न वैल्यू इंडेक्स 0 पर हल हुई।

यहां एक सही समाधान है, जो selectedसंपत्ति को ध्यान में रखता है:

$('#name').change(function(){
    $('#name2').val(function () {
        return $(this).find('option').filter(function () {
            return $(this).prop('defaultSelected');
        }).val();
    });
});

डेमो : http://jsfiddle.net/weg82/257/

---

मूल उत्तर - INCORRECT

JQuery 1.6+ में आपको .propडिफ़ॉल्ट चयन प्राप्त करने के लिए विधि का उपयोग करने की आवश्यकता है :

// Resets the name2 dropdown to its default value
$('#name2').val( $('#name2').prop('defaultSelected') );

पहला ड्रॉपडाउन बदलने पर इसे गतिशील रूप से रीसेट करने के लिए, .changeघटना का उपयोग करें :

$('#name').change(function(){
  $('#name2').val( $('#name2').prop('defaultSelected') );
});

Comments

जेन्स रोलैंड ने कहा,

— वाइसवर्स

लेकिन इसके विपरीत समर्थन का कोई मतलब नहीं है - यह एक बड़ी गिरावट के बराबर है। मुझे नहीं मिला।

— जेन्स रोलैंड

यह सिर्फ लिखने के लिए पर्याप्त है$('#name2').val( $(this).prop('defaultSelected') );

— vsync

@vsync: $(this)संदर्भित करता है $('#name'), नहीं $('#name2'), तो नहीं

— जेन्स रोलैंड

defaultSelectedएक <option>संपत्ति है, हमेशा undefinedएक<select>

— पियरे डी लेस्पिन

Answer 4

यदि आप उस विकल्प का चयन करना चाहते हैं, जिसमें "चयनित" विशेषता है। फार्म के समान कार्य करता है। चयन करने के लिए फॉर्मसेट () इनबिल्ट जावास्क्रिप्ट फ़ंक्शन।

 $("#name").val($("#name option[selected]").val());

Answer 5

इससे मुझे बहुत मदद मिलती है।

$(yourSelector).find('select option:eq(0)').prop('selected', true);

Answer 6

यहां बताया गया है कि मुझे यह कैसे काम करना है अगर आप इसे अपने पहले विकल्प पर वापस लाना चाहते हैं जैसे "" एक विकल्प चुनें "" Select_id_wrap "जाहिर तौर पर चयन के चारों ओर div है, लेकिन मैं सिर्फ उस मामले में यह स्पष्ट करना चाहता हूं जिसमें यह है यह कैसे काम करता है इस पर कोई असर। मेरा एक क्लिक समारोह के लिए रीसेट करता है, लेकिन मुझे यकीन है कि यह परिवर्तन पर भी काम करेगा ...

$("#select_id_wrap").find("select option").prop("selected", false);

Answer 7

नीचे दिए गए कोड का उपयोग करें। इसे यहाँ काम करते हुए देखें http://jsfiddle.net/usmanhalalit/3HPz4/

 $(function(){
     $('#name').change(function(){
         $('#name2 option[value=""]').attr('selected','selected');
     });

     $('#name2').change(function(){
         $('#name option[value=""]').attr('selected','selected');
     });
 });

Comments

फिर से - केवल तभी काम करता है जब डिफ़ॉल्ट पहले / खाली एक के रूप में तय किया गया हो

— जेन्स रोलैंड

Answer 8

यह भी इस्तेमाल किया जा सकता है

$('#name2').change(function(){
    $('#name').val('');//You can set the first value of first one if that is not empty
});


$('#name').change(function(){
    $('#name2').val('');
});

Answer 9

यह आपके रूप में सभी चुनिंदा बक्से को रीसेट करने का सबसे लचीला / पुन: प्रयोज्य तरीका है।

      var $form = $('form') // Replace with your form selector
      $('select', $form).each(function() {
        $(this).val($(this).prop('defaultSelected'));
      });

Answer 10

यहां बताया गया है कि डिफ़ॉल्ट मान के रूप में परिभाषित यादृच्छिक विकल्प तत्व के साथ इसे कैसे संभालें (इस मामले में पाठ 2 डिफ़ॉल्ट है):

<select id="name2" >
   <option value="">select all</option>
   <option value="1">Text 1</option>
   <option value="2" selected="selected">Text 2</option>
   <option value="3">Text 3</option>
</select>
<script>
    $('#name2 option[selected]').prop('selected', true);
</script>

Answer 11

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

$( 'select' ).each( function () {
    if ( $( this ).children().length > 0 ) {
        $( $( this ).children()[0] ).attr( 'selected', 'selected' );
        $( this ).change();
    }
} );

Answer 12

मुझे jJ v1.9.1 में @Jens Roland द्वारा जवाब में DefaultSelected संपत्ति का उपयोग करने में समस्या थी। एक अधिक सामान्य तरीका (कई आश्रित चयनों के साथ) आपके निर्भर चयनों में डेटा-डिफ़ॉल्ट विशेषता डालना और फिर रीसेट करते समय उनके माध्यम से पुनरावृत्ति करना होगा।

<select id="name0" >
    <option value="">reset</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

<select id="name1" class="name" data-default="1">
    <option value="">select all</option>
    <option value="1" selected="true">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

<select id="name2" class="name" data-default="2">
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2" selected="true">Text 2</option>
    <option value="3">Text 3</option>
</select>

और जावास्क्रिप्ट ...

$('#name0').change(function(){
    if($('#name0').val() == '') {
        $('select.name').each(function(index){
          $(this).val($(this).data('default'))  
        })
    } else {
      $('select.name').val($('#name0').val() );
    }
});

उपरोक्त कार्यशील संस्करण के लिए http://jsfiddle.net/8hvqN/ देखें ।

Answer 13

मैंने चुनिंदा टैग में एक नया विकल्प बनाया है जिसमें रिक्त स्ट्रिंग ("") का मान है और इसका उपयोग किया जाता है:

$("form.query").find('select#topic').val("");

Answer 14

चयन करने के लिए onchange घटना को बांधने के लिए jquery का उपयोग करें लेकिन आपको एक और $(this)jquery ऑब्जेक्ट बनाने की आवश्यकता नहीं है ।

$('select[name=name2]').change(function(){
    if (this.value) {
        console.log('option value = ', this.value);
        console.log('option text  = ', this.options[this.selectedIndex].text);

        // Reset selected
        this.selectedIndex = this.defaultSelected;
    }
});

Answer 15

सभी चयन फ़ील्ड को डिफ़ॉल्ट विकल्प पर रीसेट करने के लिए इस कोड का उपयोग करें, जहां चयनित विशेषता को परिभाषित किया गया है।

<select id="name1" >
    <option value="1">Text 1</option>
    <option value="2" selected="selected" >Default Text 2</option>
    <option value="3">Text 3</option>
</select>
<select id="name2" >
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3" selected="selected" >Default Text 3</option>
</select>
<script>
    $('select').each( function() {
        $(this).val( $(this).find("option[selected]").val() );
    });
</script>

Answer 16

यहाँ सबसे अच्छा समाधान im का उपयोग कर रहा है। यह 1 से अधिक slectbox के लिए लागू होगा

$("select").change(function(){
    var thisval = $(this).val();
    $("select").prop('selectedIndex',0);
    $(this).val(thisval);
})

Answer 17

चुनिंदा तत्व में विकल्प 1 सेट करना इस सेगमेंट का हो सकता है। इसे नेत्रहीन दिखाने के लिए, आपके पास अंत में tp add .trigger ('परिवर्तन') है।

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