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



jquery javascript-events (11)

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

'পরিবর্তন' কর্ম ফাংশন ড্রপ ডাউন লেখার আগে একটি গ্লোবাল ভেরিয়েবল নির্বাচিত নির্বাচিত jQuery সঙ্গে মান নির্বাচিত ড্রপ ডাউন মান রাখুন। আপনি যদি ফাংশনে আগের মানটি সেট করতে চান তবে আপনি গ্লোবাল ভেরিয়েবল ব্যবহার করতে পারেন।

//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 #2

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


Answer #3

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

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

আমি jquery.data() পিন্টোর সমাধান যা 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
})

Answer #5

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

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

আমি জানি এটি একটি পুরানো থ্রেড, তবে ভাবলাম আমি একটু অতিরিক্ত যোগ করতে পারি। আমার ক্ষেত্রে আমি টেক্সট, 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 #7

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

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

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

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

$('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 #10

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

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





javascript-events