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

— কেমনস

আমি ড্রপডাউনটির প্রথম উপাদানটি নির্বাচন করি তবে পাঠ্যটি এখনও পুরানো।

— ভ্যাটো

আমি এটি নির্বাচন বাকী বাকী হিসাবে ব্যবহার করছি এটি ঠিক আছে? না আমি ঠিকমতো পাচ্ছি না?

— অঙ্কিত সুতার

@ankitsuthar এটির নির্বাচিত বিকল্পটি selectপ্রদত্ত মানকে পরিবর্তিত করবে । select.prop('selectedIndex', 0)এটি প্রথম বিকল্পটি পুনরায় select.prop('selectedIndex', 1)সেট করবে, এটি দ্বিতীয় বিকল্পে সেট করবে।

— জ্যাক

Answer 2

আপনি যদি নির্বাচিত উপাদানটিকে প্রথম অবস্থানে পুনরায় সেট করতে চান তবে সবচেয়ে সহজ উপায় হতে পারে:

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

দস্তাবেজের সমস্ত নির্বাচিত উপাদানগুলি পুনরায় সেট করতে:

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

সম্পাদনা: নীচের মতামত অনুসারে স্পষ্ট করতে, এটি নির্বাচিত উপাদানটিকে তার প্রথম ফাঁকা এন্ট্রিতে পুনরায় সেট করে এবং কেবলমাত্র তালিকায় একটি ফাঁকা এন্ট্রি উপস্থিত থাকলে।

Comments

হ্যাঁ এটি প্রায় সব সময় কাজ করবে। অন্যান্য সমাধানগুলিতে মাঝে মাঝে সমস্যা থাকতে পারে। সহজ উপায়।

— স্বরূপ শাক্য

কেবলমাত্র একটি সতর্কতা: আপনি কেবলমাত্র প্রথম বিকল্পটি নির্বাচন করতে চান এবং প্রথম বিকল্পটিতে একটি মান সেট ফাঁকা থাকলে তা কেবলমাত্র কাজ করবে। আপনার প্রথম বিকল্পের যদি অন্য কোনও মান থাকে বা সেলে বাক্টের কোনও বিকল্পের ফাঁকা মান না থাকে, তবে এটি কোনও পরিবর্তনকে প্রভাবিত করবে না। অথবা, যদি অন্য কোনও বিকল্পের শূন্যের মান থাকে তবে পরিবর্তে এটি বিকল্পটি নির্বাচন করবে।

— এইচব্ল্যাকরবি

@ এইচবি ব্ল্যাকর্বি, আপনার মন্তব্যটি সহায়ক ছিল তবে 1) এর সাথে বিকল্পটি value=""কোনও ক্রমে উপস্থিত হতে পারে। ২) মান বৈশিষ্ট্য ব্যতীত একটি বিকল্প <option></option>যেমন একটি খালি স্ট্রিং মান বৈশিষ্ট্যযুক্ত বিকল্প হিসাবে একই নয় <option value=""></option>, এবং আপনি এটি স্পষ্ট করে দিয়েছিলেন আমাদের value="" অংশটি 3 প্রয়োজন ) এমনকি <option>শূন্য-স্ট্রিংয়ের মান না থাকলেও ; সেটিংটি .val('')"পরিবর্তনকে প্রভাবিত করবে", নির্বাচনটি ফাঁকা বদলে প্রদর্শিত হবে, তাই না? কমপক্ষে আমার ক্রোমে ...

— দ্য রেড মটর

Answer 3

মন্তব্যগুলিতে @ পিয়ারডেলেস্পিনে দ্বারা নির্দেশিত হিসাবে, আমার মূল সমাধানটি ভুল ছিল - এটি ড্রপডাউনটিকে শীর্ষতম বিকল্পে পুনরায় সেট করবে তবে কেবলমাত্র 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/

---

আসল উত্তর - ভুল

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

জেনস রোল্যান্ড যা বলেছে, ভাইভার্সা

— zynaps

তবে তদ্বিপরীত সমর্থনটি বোঝায় না - এটি একটি বৃহত ড্রপডাউন সমতুল্য। আমি পাই না।

— জেনস রোল্যান্ড

এটি কেবল লেখার জন্য যথেষ্ট$('#name2').val( $(this).prop('defaultSelected') );

— vsync

@vsync: না , তাই না$(this)$('#name')$('#name2')

— জেনস রোল্যান্ড

defaultSelectedএকটি <option>সম্পত্তি, সর্বদা undefinedএকটি এ ফিরে আসবে<select>

— পিয়েরে লেস্পিনে

Answer 4

আপনি যদি "নির্বাচিত" বৈশিষ্ট্যযুক্ত বিকল্পটিতে নির্বাচনটি পুনরায় সেট করতে চান তবে এটি ব্যবহার করুন। Form.reset () ইনবিল্ট জাভাস্ক্রিপ্ট ফাংশন নির্বাচন করতে অনুরূপ কাজ করে।

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

Answer 5

এটি আমাকে অনেক সাহায্য করে।

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

Answer 6

এখানে আপনি কীভাবে এটি আপনার প্রথম বিকল্পটিতে ফিরে পেতে চান তা কাজ করতে পেল eg যেমন "একটি বিকল্প চয়ন করুন" "নির্বাচন_আইড_আর্যাপ" অবশ্যই নির্বাচনের চারপাশে বিভাজন, তবে আমি কেবল এটি স্পষ্ট করতে চাই যদি এটি আছে তবে এটি কীভাবে কাজ করে তা নিয়ে কোনও প্রভাব। খনিটি একটি ক্লিক ফাংশনে পুনরায় সেট করে তবে আমি নিশ্চিত যে এটি অন পরিবর্তনের মধ্যেও কাজ করবে ...

$("#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

JQuery v1.9.1 এ @ জেনস রোল্যান্ডের উত্তরে আমি ডিফল্টনির্বাচিত সম্পত্তিটি ব্যবহার করতে সমস্যা হয়েছিল। আরও জেনেরিক উপায় (অনেক নির্ভরশীল নির্বাচন সহ) আপনার নির্ভরশীল নির্বাচনগুলিতে একটি ডেটা-ডিফল্ট বৈশিষ্ট্য স্থাপন করা এবং তারপরে পুনরায় সেট করার সময় সেগুলির মাধ্যমে পুনরাবৃত্তি হয়।

<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

বাইন্ডিং অনচেঞ্জ ইভেন্টটি নির্বাচন করতে 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

এখানে ব্যবহারের সেরা সমাধান। এটি 1 টিরও বেশি সেল্টবক্সের জন্য প্রযোজ্য হবে

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

Answer 17

নির্বাচনের উপাদানটিতে বিকল্প 1 সেট করা এই বিভাগ দ্বারা করা যেতে পারে। এটি দৃশ্যমানভাবে দেখানোর জন্য, আপনার শেষে টিপি যুক্ত .trigger ('পরিবর্তন') থাকবে।

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