javascript পরিবর্তন আগে নির্বাচন(ড্রপডাউন) মান প্রাপ্ত



jquery javascript-events (13)

যে জিনিসটি আমি অর্জন করতে চাই তা হ'ল যখন <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>

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

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

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


Answer #1

সবচেয়ে ভালো সমাধান:

$('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);
});

Answer #2

একটি কৌণিক ঘড়ির টাইপ ইন্টারফেস সহ একটি কাস্টম 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 #3

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

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

Answer #4

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

(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


Answer #5

হাত দ্বারা মান ট্র্যাক।

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;
  });
});

Answer #6

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

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

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

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 #8

এই জন্য একটি বিশ্বব্যাপী var ব্যবহার করবেন না - এখানে তথ্যটির বর্তমান মূল্য একটি উদাহরণ: 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());
  });
});

শুধু দেখেছেন যে আপনার পৃষ্ঠায় অনেকগুলি নির্বাচন রয়েছে - এই পদ্ধতিটি আপনার জন্যও কাজ করবে, যেহেতু প্রতিটি নির্বাচনের জন্য আপনি নির্বাচিত তথ্যের উপর বিদ্যমান মূল্য সঞ্চয় করবেন


Answer #9
(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 #10

আমি জানি এটি একটি পুরানো থ্রেড, তবে ভাবলাম আমি একটু অতিরিক্ত যোগ করতে পারি। আমার ক্ষেত্রে আমি টেক্সট, Val এবং কিছু অন্যান্য তথ্য attr পাস করতে চাই। এই ক্ষেত্রে এটি শুধুমাত্র ভাল মানের পরিবর্তে পুরো বিকল্পটি সংরক্ষণের জন্য ভাল।

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

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());
});

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

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


Answer #11

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

উপাদানটিকে তার পূর্বের মানটি ধরে রাখতে দিন, তাই একটি বৈশিষ্ট্য 'পূর্ববর্তী ভ্যালু' যোগ করুন।

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

একবার শুরু হয়ে গেলে, 'পূর্ববর্তী ভ্যালু' এখন একটি বৈশিষ্ট্য হিসাবে ব্যবহার করা যেতে পারে। JS এ, এই নির্বাচন পূর্ববর্তী ভলিউম অ্যাক্সেস করতে:

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

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


Answer #12

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

(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 যে তাই def ব্যবহার করে। এখানে একটি নির্ভরতা, কিন্তু এই বিশুদ্ধ জাভাস্ক্রিপ্ট কাজ করার জন্য অভিযোজিত করা যেতে পারে। (শরীরের একটি শ্রোতা যোগ করুন, মূল লক্ষ্য একটি নির্বাচন ছিল কিনা তা পরীক্ষা করুন, কার্য সম্পাদন করুন, ...)।

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

এটি অবশ্যই আপনি আপনার সেট-পূর্বের এবং চেক-মানের জন্য আলাদা শ্রোতা ব্যবহার করতে পছন্দ করেন। এটা একক দায়িত্ব প্যাটার্ন সঙ্গে অধিকার ফিট করে।

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


Answer #13
 $("#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());
});




javascript-events