পরিবর্তনের আগে নির্বাচনের (ড্রপডাউন) মান পাওয়া value

Question

আমি যে জিনিসটি অর্জন করতে চাই তা হ'ল যখনই <select>ড্রপডাউন পরিবর্তন হয় আমি পরিবর্তনের আগে ড্রপডাউনটির মান চাই। আমি jQuery এর 1.3.2 সংস্করণ ব্যবহার করছি এবং পরিবর্তন ইভেন্টগুলিতে ব্যবহার করছি তবে পরিবর্তনের পরে আমি যে মানটি পেয়ে যাচ্ছি তা হয়।

<select name="test">
<option value="stack">Stack</option>
<option value="overflow">Overflow</option>
<option value="my">My</option>
<option value="question">Question</option>
</select>

আসুন বলুন বর্তমানে আমার অপশনটি এখনই নির্বাচিত হবে যখন আমি এটিকে পরিবর্তন শুরুর ইভেন্টে স্ট্যাকের জন্য পরিবর্তন করব (যেমন আমি যখন এটি স্ট্যাকে পরিবর্তন করেছি) আমি তার পূর্ববর্তী মানটি চাই যা এই ক্ষেত্রে আমার প্রত্যাশিত।

কিভাবে এটা অর্জন করা যেতে পারে?

সম্পাদনা করুন: আমার ক্ষেত্রে আমার একই পৃষ্ঠায় একাধিক নির্বাচন বাক্স রয়েছে এবং তাদের সকলের জন্য একই জিনিস প্রয়োগ করা চাই। এছাড়াও আমার নির্বাচনের সমস্তটি এজ্যাক্সের মাধ্যমে পৃষ্ঠা লোডের পরে sertedোকানো হয়।

Comments

আপনি কি এটি পরীক্ষা করে দেখেছেন

— রজত

Answer 1

আপনি যা চান তা অর্জনের জন্য পরিবর্তন ইভেন্টের সাথে ফোকাস ইভেন্টটি একত্রিত করুন :

(function () {
    var previous;

    $("select").on('focus', function () {
        // Store the current value on focus and on change
        previous = this.value;
    }).change(function() {
        // Do something with the previous value after the change
        alert(previous);

        // Make sure the previous value is updated
        previous = this.value;
    });
})();

কার্যকারী উদাহরণ: http://jsfiddle.net/x5PKf/766

Comments

@Alpesh: দুর্ভাগ্যবশত না, যেহেতু আপনি jQuery 1.4.1 ব্যবহার করছেন না বা পরে, আপনি ব্যবহার করতে চলেছেন অক্ষম লাইভ () সঙ্গে ফোকাস এবং পরিবর্তন ইভেন্ট নেই। উপাদানগুলিকে পৃষ্ঠাতে সন্নিবেশ করার পরে আপনি কেবলমাত্র যা করতে পারেন তা হ'ল আপনার স্ক্রিপ্টটি বাঁধতে adjust

— অ্যান্ডি ই

ধন্যবাদ আমি ইতিমধ্যে উভয়কে লাইভ দিয়ে আবদ্ধ করেছি এবং এটি সফলভাবে কাজ করেছে worked :)

— আলপেশ

নোট করুন যে আপনার পরিবর্তনের হ্যান্ডলারের মধ্যেও নির্বাচিত উপাদানগুলিকে ফোকাস করা উচিত, অন্যথায় পুনরাবৃত্তি মান পরিবর্তনের পরে এটি ট্রিগার করা হবে না

— অ্যালেক্স

আমি এই সমাধানের সাথে একমত নই। আপনি একবার মান পরিবর্তন করলে এটি কাজ করবে তবে আপনি যদি আরও একবার এটি করেন তবে তা হবে না। ফোকাসটি শিথিল করতে আপনাকে অন্য কোথাও ক্লিক করতে হবে এবং ড্রপডাউনতে অন্য ক্লিক করতে হবে। আমি প্রস্তাব দিই: $ ("# ড্রপডাউনআইডি")। ('পরিবর্তন', ফাংশন () {var ডিডিএল = $ (এটি); ভের পূর্ববর্তী = ডিডিএল.ডাটা ('পূর্ববর্তী'); ডিডিএল.ডাটা ('পূর্ববর্তী', ডিডিএল) .val ());});

— ফ্রি

@ ফ্রি4 রাইড, ঠিক করার জন্য আমি কেবল $(this).blur();পরিবর্তনের ফাংশন শেষে কল করব

— চিলনিট

Answer 2

দয়া করে এটির জন্য বিশ্বব্যাপী বৈচিত্র্য ব্যবহার করবেন না - এখানে ডেটাতে পূর্ব মানটি সংরক্ষণ করুন উদাহরণ: http://jsbin.com/uqupu3/2/edit

রেফার জন্য কোড:

$(document).ready(function(){
  var sel = $("#sel");
  sel.data("prev",sel.val());

  sel.change(function(data){
     var jqThis = $(this);
     alert(jqThis.data("prev"));
     jqThis.data("prev",jqThis.val());
  });
});

কেবলমাত্র আপনার পৃষ্ঠায় অনেকগুলি নির্বাচন রয়েছে তা দেখেছি - প্রতিটি নির্বাচনের জন্য আপনি নির্বাচনের ডেটাতে পূর্বের মানটি সংরক্ষণ করবেন এই পদ্ধতিটি আপনার পক্ষেও কাজ করবে

Comments

jQuery.data এখানে একটি ভাল সমাধান। আপনার সমাধানে আপনি প্রতিটি নির্বাচনের জন্য একটি ক্লোজার তৈরি করছেন যা অনেকগুলি নির্বাচিত উপাদান রয়েছে এমন পারফেক্ট প্রভাব ফেলবে

— আভি পিন্টো

আমার উদ্বেগ পারফরম্যান্সের ছিল না, এবং আমি নিশ্চিত নই যে তৈরির কাজগুলি jQuery.dataযেভাবেই হোক ধীর হয় are

— আগস্ট লিলিয়াস

তাহলে jQuery.data ব্যবহার করার ক্ষেত্রে আপনার আপত্তি কী? যতদূর আমি জানি jQuery লাইব্রেরিও এটি অভ্যন্তরীণভাবে ব্যবহার করে এবং এটি ব্যবহারের জন্য প্রস্তাব দেয়

— আভি পিন্টো

অবশ্যই jQuery ডেটা ব্যবহারের সাথে একমত - আমাকে স্মরণ করিয়ে দেওয়ার জন্য যে আমি বিশ্বব্যাপী ব্যবহার করতে চলেছি ধন্যবাদ .. বিশ্বব্যাপী ভের সাথে কিছু ভুল হয়নি তবে ডেটা ব্যবহার করা আরও সংক্ষিপ্ত। তবে চেইন ফোকাস এবং তারপরে পরিবর্তনটিও দুর্দান্ত :) :)

— পাইওটার কুলা

@ পিপমকিন: গ্লোবাল ভেরিয়েবলের সাথে একটি জিনিস অবশ্যই ভুল It এটি কেবল একটিটিকে সমর্থন করে select! গ্রহণযোগ্য উত্তরটি ভেঙে যাওয়ায় এটি সমস্তটির সাথে মেলে selectতবে কেবলমাত্র প্রথমটির মান সংরক্ষণ করে। data এটি করার ভাল উপায়। +1 :)

— কোডিং হয়েছে

Answer 3

আমি অ্যাভি পিন্টোর সলিউশন যা যা ব্যবহার করে for jquery.data()

ফোকাস ব্যবহার করা কোনও বৈধ সমাধান নয়। আপনি বিকল্পগুলি পরিবর্তন করতে এটি প্রথম সময়ে কাজ করে তবে আপনি যদি সেই নির্বাচিত উপাদানটিতে থেকে থাকেন এবং কী "আপ" বা "ডাউন" টিপেন। এটি আবার ফোকাস ইভেন্টের মধ্য দিয়ে যাবে না।

সুতরাং সমাধানটি আরও নীচের মত দেখতে হবে,

//set the pre data, usually needed after you initialize the select element
$('mySelect').data('pre', $(this).val());

$('mySelect').change(function(e){
    var before_change = $(this).data('pre');//get the pre data
    //Do your work here
    $(this).data('pre', $(this).val());//update the pre data
})

Comments

দুর্দান্ত সমাধান, নির্বাচিত উত্তরের চেয়ে অনেক ভাল!

— টিজেএল

দ্বিতীয় অংশটি সূক্ষ্মভাবে কাজ করে তবে প্রথম অংশটি ডেটা অ্যাট্রিবিউট সেট করে নি। কোন ধারনা?

— সিনাইস্টেটিক

@ সিনেস্টেথিক, আমারও একই সমস্যা ছিল (এবং ইতিমধ্যে এই উত্তরটি অগ্রাহ্য করেছি)। আমি মনে করি না $ (এটি) .ডাটা () পদ্ধতিতে বেঁচে আছে। অভি পিন্টোর উত্তরটি তার মানটির জন্য নির্বাচিত উপাদানগুলিতে ফিরে যায় এবং এটি আমার পক্ষে কাজ করে (তাই আমিও আভির পাশাপাশি উন্নতি করেছি)।

— গুডেয়ে

এটি এর পর থেকে কার্যকর হবে না! == $ ('মাই সিলেক্ট')। এখানে একটি স্থির সংস্করণ। var $selectStatus = $('.my-select'); $selectStatus.on('change', function () { var newStatus = $(this).val(); var oldStatus = $(this).data('pre'); }).data('pre', $selectStatus.val());

— কেপি

@ সিনেস্টেথিক এই লাইনটি সমস্ত "মাই সিলেক্ট" উপাদানগুলিতে একটি মান নির্ধারণ করে $('mySelect').data('pre', $(this).val());এটির মতো হওয়া উচিত: $('mySelect').each(function() { $(this).data('pre', $(this).val()); });উত্তরটি সম্পাদনা করার মতো যথেষ্ট খ্যাতি আমার নেই: /

— আবদারাহিম

Answer 4

হাত দিয়ে মান ট্র্যাক করুন।

var selects = jQuery("select.track_me");

selects.each(function (i, element) {
  var select = jQuery(element);
  var previousValue = select.val();
  select.bind("change", function () {
    var currentValue = select.val();

    // Use currentValue and previousValue
    // ...

    previousValue = currentValue;
  });
});

Comments

আমি উপরের পদ্ধতির বিচিউসটি ব্যবহার করতে পারি না আমার সাথে একই পৃষ্ঠাতে একাধিক নির্বাচন বাক্স রয়েছে যার সাথে আমার লেনদেন করতে হবে।

— আলপেশ

আপনি আপনার প্রশ্নের একাধিক নির্বাচন বোতাম সম্পর্কে কিছুই বলেন নি। যদিও একাধিক বাক্স সমর্থন করার জন্য আমার উত্তর আপডেট করেছে।

— আগস্ট লিলিয়াস

সর্বোত্তম উত্তর. আমি মনে করি এই সমাধানটি ফোকাস () এবং পরিবর্তনের () পরিবর্তনের চেয়ে ভাল কারণ এটি ব্রাউজারের সামঞ্জস্যতার জন্য jquery উপর নির্ভর করে তবে উভয় পদ্ধতির কার্যকর প্রবাহের সঠিক প্রবাহ

— coorasse

@ কুরাসেস: মৃত্যুদন্ড কার্যকর করার প্রবাহটি কখনও আলাদা হতে পারে না। উপাদানটি ফোকাস নেওয়ার আগে একটি নির্বাচিত বাক্সের মান ব্যবহারকারী কখনও পরিবর্তন করতে পারে না । এটি বলা হচ্ছে, এই পদ্ধতির সাথে কোনও ভুল নেই :-)

— অ্যান্ডি ই

'ক্লোজার' ব্যবহারের দৃষ্টিকোণ থেকে, আমি নিশ্চিত নই যে এটি 'ফোকাস' সমাধানের চেয়ে ভাল কিনা।

— জেমস পোলুস

Answer 5

 $("#dropdownId").on('focus', function () {
    var ddl = $(this);
    ddl.data('previous', ddl.val());
}).on('change', function () {
    var ddl = $(this);
    var previous = ddl.data('previous');
    ddl.data('previous', ddl.val());
});

Comments

এটি আমার জন্য কেবল সামান্য

— সংশোধনই নেমেছে

পরিবর্তন ইভেন্টটি ব্যবহারকারীর মিথস্ক্রিয়া ছাড়াই ঘটতে পারে, সুতরাং এটি কোনও ব্রেইনার নয়

— qdev مارچ

Answer 6

আমি ইভেন্টটি "লাইভ" ব্যবহার করছি, আমার সমাধানটি মূলত দিমিতিয়রের সাথেই সমান, তবে "ফোকাস" ব্যবহার করার পরিবর্তে, "ক্লিক" ট্রিগার করা হলে আমার আগের মানটি সংরক্ষণ করা হয়।

var previous = "initial prev value";
$("select").live('click', function () {
        //update previous value
        previous = $(this).val();
    }).change(function() {
        alert(previous); //I have previous value 
    });

Comments

আমি এটি ব্যবহার করব না। যদি ব্যবহারকারী নির্বাচনের উপাদানগুলিতে 'ট্যাবগুলি' ব্যবহার করে এবং তার কীবোর্ড তীরগুলি কোনও ভিন্ন বিকল্প নির্বাচন করতে ব্যবহার করে?

— খ্রিস্টান লুন্ডাহাল

@ পারপ্লেক্সর হ্যাঁ, এটি কীগুলির সাথে কাজ করবে না, অন্যথায় আপনি যখন কী টিপবেন ততবার এটি প্রতিটি মান সংরক্ষণ করবে। এটি কেবল ধরে নেবে যে ব্যবহারকারীরা ড্রপ ডাউন মেনুতে ক্লিক করেন। সমস্যাটি হল 'লাইভ' ইভেন্টটি 'ফোকাস' দিয়ে কাজ করবে না, এর থেকে আরও ভাল সমাধান আমি জানি না।

— সিকা গুস্তানি

আপনি ফোকাসের বর্তমান মানটি একটি পৃথক ভেরিয়েবলের মধ্যে সঞ্চয় করতে পারেন। এটি ঠিক আমার মাথার শীর্ষ থেকে তাই আমি নিশ্চিত না যে এটি আদর্শ কিনা।

— খ্রিস্টান লুন্ডাহাল

'ফোকাস' যদি 'লাইভ' ইভেন্টের সাথে কাজ করতে পারে তবে এটি সঠিক হবে। তবে যদি আপনি এই ড্রপ ডাউন মেনুগুলিকে গতিশীলভাবে তৈরি করেন তবে আপনি কেবল 'লাইভ' ব্যবহার করতে পারেন, এটি আমি জানি। দুর্ভাগ্যক্রমে, 'লাইভ' এর 'ফোকাস' ইভেন্টটি নতুন মানগুলি সংরক্ষণ করতে ট্রিগার করে না, তবে আমি নতুন jquery এর সাথে জানি না

— Cica Gustiani

লাইভ jQuery এর নতুন সংস্করণে মারা গেছে! [ স্ট্যাকওভারফ্লো.com/ প্রশ্ন

— রিমো

Answer 7

'অন চেঞ্জ' অ্যাকশন ফাংশনটি লেখার আগে বিশ্বব্যাপী চলকটিতে নির্বাচিত জ্যাকুরির সাথে বর্তমানে নির্বাচিত ড্রপ ডাউন মানটি রাখুন। আপনি যদি ফাংশনটিতে পূর্ববর্তী মান সেট করতে চান তবে আপনি বিশ্বব্যাপী চলকটি ব্যবহার করতে পারেন।

//global variable
var previousValue=$("#dropDownList").val();
$("#dropDownList").change(function () {
BootstrapDialog.confirm(' Are you sure you want to continue?',
  function (result) {
  if (result) {
     return true;
  } else {
      $("#dropDownList").val(previousValue).trigger('chosen:updated');  
     return false;
         }
  });
});

Answer 8

কৌণিক ঘড়ির ধরণের ইন্টারফেস সহ একটি কাস্টম jQuery ইভেন্ট ব্যবহার সম্পর্কে কীভাবে;

// adds a custom jQuery event which gives the previous and current values of an input on change
(function ($) {
    // new event type tl_change
    jQuery.event.special.tl_change = {
        add: function (handleObj) {
            // use mousedown and touchstart so that if you stay focused on the
            // element and keep changing it, it continues to update the prev val
            $(this)
                .on('mousedown.tl_change touchstart.tl_change', handleObj.selector, focusHandler)
                .on('change.tl_change', handleObj.selector, function (e) {
                // use an anonymous funciton here so we have access to the
                // original handle object to call the handler with our args
                var $el = $(this);
                // call our handle function, passing in the event, the previous and current vals
                // override the change event name to our name
                e.type = "tl_change";
                handleObj.handler.apply($el, [e, $el.data('tl-previous-val'), $el.val()]);
            });
        },
        remove: function (handleObj) {
            $(this)
                .off('mousedown.tl_change touchstart.tl_change', handleObj.selector, focusHandler)
                .off('change.tl_change', handleObj.selector)
                .removeData('tl-previous-val');
        }
    };

    // on focus lets set the previous value of the element to a data attr
    function focusHandler(e) {
        var $el = $(this);
        $el.data('tl-previous-val', $el.val());
    }
})(jQuery);

// usage
$('.some-element').on('tl_change', '.delegate-maybe', function (e, prev, current) {
    console.log(e);         // regular event object
    console.log(prev);      // previous value of input (before change)
    console.log(current);   // current value of input (after change)
    console.log(this);      // element
});

Answer 9

আমি জানি এটি একটি পুরানো থ্রেড, তবে ভেবেছিলাম আমি আরও কিছুটা বাড়িয়ে তুলতে পারি। আমার ক্ষেত্রে আমি পাঠ্য, ভাল এবং কিছু অন্যান্য ডেটা অ্যাটর্কে পাস করতে চাইছিলাম। এক্ষেত্রে পুরো বিকল্পটি কেবল ভালের চেয়ে ভাল হিসাবে মান হিসাবে ভাল করা ভাল।

নীচের উদাহরণ কোড:

var $sel = $('your select');
$sel.data("prevSel", $sel.clone());
$sel.on('change', function () {
    //grab previous select
    var prevSel = $(this).data("prevSel");

    //do what you want with the previous select
    var prevVal = prevSel.val();
    var prevText = prevSel.text();
    alert("option value - " + prevVal + " option text - " + prevText)

    //reset prev val        
    $(this).data("prevSel", $(this).clone());
});

সম্পাদনা করুন:

আমি উপাদানটিতে। ক্লোন () যুক্ত করতে ভুলে গেছি। যখন আপনি আগেরটির চেয়ে সিলেক্টের নতুন কপিটিতে টানা শেষ হওয়া মানগুলি পিছনে টানানোর চেষ্টা করবেন তখন এটি না করার ক্ষেত্রে। ক্লোন () পদ্ধতিটি ব্যবহার করে নির্বাচনের উদাহরণের পরিবর্তে একটি অনুলিপি সঞ্চয় করে।

Answer 10

ঠিক আছে, আপনি বর্তমান নির্বাচিত মানটি কেন সংরক্ষণ করবেন না এবং যখন নির্বাচিত আইটেমটি পরিবর্তন করা হবে তখন আপনি পুরানো মান সংরক্ষণ করবেন? (এবং আপনি নিজের ইচ্ছে মত আবার আপডেট করতে পারেন)

Comments

আমি এটি করতে পারি না কারণ আমার ক্ষেত্রে আমার একই পৃষ্ঠায় একাধিক নির্বাচন বাক্স রয়েছে। এবং শুরুতে সকলের প্রাথমিক মান সঞ্চয় করা অত্যন্ত টিউনিসিয়াস হবে।

— আলপেশ

Answer 11

নিম্নলিখিত কোড ব্যবহার করুন, আমি এটি এবং এর কাজ পরীক্ষা করেছি have

var prev_val;
$('.dropdown').focus(function() {
    prev_val = $(this).val();
}).change(function(){
            $(this).unbind('focus');
            var conf = confirm('Are you sure want to change status ?');

            if(conf == true){
                //your code
            }
            else{
                $(this).val(prev_val);
                $(this).bind('focus');
                return false;
            }
});

Answer 12

(function() {

    var value = $('[name=request_status]').change(function() {
        if (confirm('You are about to update the status of this request, please confirm')) {
            $(this).closest('form').submit(); // submit the form
        }else {
            $(this).val(value); // set the value back
        }
    }).val();
})();

Answer 13

আমি এই সমস্যাটি সমাধান করার জন্য অন্য বিকল্প অবদান রাখতে চাই; যেহেতু উপরে প্রস্তাবিত সমাধানগুলি আমার দৃশ্যের সমাধান করেনি।

(function()
    {
      // Initialize the previous-attribute
      var selects = $('select');
      selects.data('previous', selects.val());

      // Listen on the body for changes to selects
      $('body').on('change', 'select',
        function()
        {
          $(this).data('previous', $(this).val());
        }
      );
    }
)();

এটি jQuery ব্যবহার করে যাতে ডিএফ। এখানে একটি নির্ভরতা, তবে এটি খাঁটি জাভাস্ক্রিপ্টে কাজ করতে অভিযোজিত হতে পারে। (শরীরে শ্রোতা যুক্ত করুন, আসল লক্ষ্যটি নির্বাচন ছিল কিনা তা পরীক্ষা করুন, কার্য সম্পাদন করুন ...)।

শরীরে পরিবর্তন শ্রোতাদের সংযুক্ত করে, আপনি বেশিরভাগ ক্ষেত্রে নিশ্চিত হতে পারেন যে এটি নির্বাচিতদের জন্য নির্দিষ্ট শ্রোতার পরে প্রকাশিত হবে , অন্যথায় আপনি এমনকি এটি পড়ার আগে 'ডেটা-পূর্ববর্তী' এর মান ওভাররাইট করা হবে।

এটি অবশ্যই ধরে নেওয়া যায় যে আপনি আপনার পূর্ববর্তী এবং চেক-মানটির জন্য পৃথক শ্রোতা ব্যবহার করতে পছন্দ করেন। এটি একক-দায়িত্ব প্যাটার্নের সাথে সঠিকভাবে খাপ খায়।

দ্রষ্টব্য: এটি সমস্ত নির্বাচনের ক্ষেত্রে এই 'পূর্ববর্তী' কার্যকারিতা যুক্ত করে, তাই প্রয়োজনে নির্বাচকদের সূক্ষ্ম-সুরে নিশ্চিত করুন।

Answer 14

এটি @ থিসিসবোরিস উত্তরের একটি উন্নতি। এটি ডেটাতে একটি বর্তমান মান যুক্ত করে, তাই বর্তমান মানটিতে একটি ভেরিয়েবল সেট পরিবর্তন করা হলে কোডটি নিয়ন্ত্রণ করতে পারে।

(function()
{
    // Initialize the previous-attribute
    var selects = $( 'select' );
    $.each( selects, function( index, myValue ) {
        $( myValue ).data( 'mgc-previous', myValue.value );
        $( myValue ).data( 'mgc-current', myValue.value );  
    });

    // Listen on the body for changes to selects
    $('body').on('change', 'select',
        function()
        {
            alert('I am a body alert');
            $(this).data('mgc-previous', $(this).data( 'mgc-current' ) );
            $(this).data('mgc-current', $(this).val() );
        }
    );
})();

Answer 15

সব থেকে ভালো সমাধান:

$('select').on('selectric-before-change', function (event, element, selectric) {
    var current = element.state.currValue; // index of current value before select a new one
    var selected = element.state.selectedIdx; // index of value that will be selected

    // choose what you need
    console.log(element.items[current].value);
    console.log(element.items[current].text);
    console.log(element.items[current].slug);
});

Comments

এই উত্তরটি "সিলেক্ট্রিক" জেএস লাইব্রেরির উপর ভিত্তি করে এবং 'প্লেইন' jQuery বা জাভাস্ক্রিপ্টে নয়। ইভেন্টহফ সেরা, এটি মূল প্রশ্নের সাথে

— খাপ খায়

Answer 16

আপনার কাঙ্ক্ষিত ফলাফল অর্জনের বিভিন্ন উপায় রয়েছে, এটি করার আমার এই নম্র উপায়:

উপাদানটিকে তার আগের মানটি ধরে রাখা যাক, সুতরাং 'পূর্ববর্তী মান' যুক্ত করুন।

<select id="mySelect" previousValue=""></select>

একবার শুরু করা হলে, 'পূর্ববর্তী মূল্য' এখন একটি অ্যাট্রিবিউট হিসাবে ব্যবহার করা যেতে পারে। জেএস-এ, এই নির্বাচনের পূর্ববর্তী মূল্যটি অ্যাক্সেস করতে:

$("#mySelect").change(function() {console.log($(this).attr('previousValue'));.....; $(this).attr('previousValue', this.value);}

আপনি 'পূর্ববর্তী মূল্য' ব্যবহার করার পরে, বর্তমান মানটির বৈশিষ্ট্যটি আপডেট করুন।

Answer 17

নির্বাচনের উপর ভিত্তি করে আমার একটি আলাদা ডিভ প্রকাশ করা দরকার

আপনি jquery এবং es6 সিনট্যাক্সের সাহায্যে এটি করতে পারেন

এইচটিএমএল

<select class="reveal">
    <option disabled selected value>Select option</option>
    <option value="value1" data-target="#target-1" >Option 1</option>
    <option value="value2" data-target="#target-2" >Option 2</option>
</select>
<div id="target-1" style="display: none">
    option 1
</div>
<div id="target-2" style="display: none">
    option 2
</div>

জাতীয়

$('select.reveal').each((i, element)=>{
    //create reference variable 
    let $option = $('option:selected', element)
    $(element).on('change', event => {
        //get the current select element
        let selector = event.currentTarget
        //hide previously selected target
        if(typeof $option.data('target') !== 'undefined'){
            $($option.data('target')).hide()
        }
        //set new target id
        $option = $('option:selected', selector)
        //show new target
        if(typeof $option.data('target') !== 'undefined'){
            $($option.data('target')).show()
        }
    })
})