Nhận giá trị của lựa chọn (thả xuống) trước khi thay đổi

Điều tôi muốn đạt được là bất cứ khi nào <select>thay đổi thả xuống tôi muốn giá trị của danh sách thả xuống trước khi thay đổi. Tôi đang sử dụng phiên bản 1.3.2 của jQuery và sử dụng sự kiện thay đổi nhưng giá trị tôi nhận được là sau khi thay đổi.

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

Hãy nói rằng tùy chọn hiện tại My được chọn ngay bây giờ khi tôi thay đổi nó thành stack trong sự kiện onchange (tức là khi tôi thay đổi nó thành stack) Tôi muốn đó là giá trị trước đó tức là tôi mong đợi trong trường hợp này.

Làm thế nào điều này có thể đạt được?

Chỉnh sửa: Trong trường hợp của tôi, tôi có nhiều hộp chọn trong cùng một trang và muốn áp dụng điều tương tự cho tất cả chúng. Ngoài ra tất cả các lựa chọn của tôi được chèn sau khi tải trang thông qua ajax.

Kết hợp sự kiện trọng tâm với sự kiện thay đổi để đạt được những gì bạn muốn:

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

Ví dụ hoạt động: http://jsfiddle.net/x5PKf/766

vui lòng không sử dụng var toàn cầu cho việc này - lưu trữ giá trị trước tại dữ liệu ở đây là một ví dụ: http://jsbin.com/uqupu3/2/edit

mã cho ref:

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

chỉ cần thấy rằng bạn có nhiều lựa chọn trên trang - phương pháp này cũng sẽ hiệu quả với bạn vì với mỗi lựa chọn, bạn sẽ lưu trữ giá trị trước trên dữ liệu của lựa chọn

Tôi đi tìm giải pháp Avi Pinto sử dụng jquery.data()

Sử dụng tập trung không phải là một giải pháp hợp lệ. Nó hoạt động ở lần đầu tiên bạn thay đổi các tùy chọn, nhưng nếu bạn ở trên phần tử chọn đó và nhấn phím "lên" hoặc "xuống". Nó sẽ không đi qua sự kiện tập trung một lần nữa.

Vì vậy, giải pháp nên giống như sau,

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

Theo dõi giá trị bằng tay.

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

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

Tôi đang sử dụng sự kiện "trực tiếp", giải pháp của tôi về cơ bản giống với Dimitiar, nhưng thay vì sử dụng "tiêu điểm", giá trị trước đó của tôi được lưu trữ khi "nhấp chuột" được kích hoạt.

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

giữ giá trị thả xuống hiện được chọn với jquery đã chọn trong một biến toàn cục trước khi viết hàm hành động thả xuống 'thay đổi'. Nếu bạn muốn đặt giá trị trước đó trong hàm, bạn có thể sử dụng biến toàn cục.

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

Làm thế nào về việc sử dụng một sự kiện jQuery tùy chỉnh với giao diện loại đồng hồ góc cạnh;

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

Tôi biết đây là một chủ đề cũ, nhưng nghĩ rằng tôi có thể thêm vào một chút thêm. Trong trường hợp của tôi, tôi muốn chuyển văn bản, val và một số dữ liệu khác. Trong trường hợp này, tốt hơn là lưu trữ toàn bộ tùy chọn dưới dạng giá trị trước thay vì chỉ là giá trị.

Mã ví dụ dưới đây:

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

BIÊN TẬP:

Tôi quên thêm .clone () vào phần tử. không làm như vậy khi bạn cố gắng kéo lại các giá trị mà bạn sẽ kéo theo bản sao mới của lựa chọn thay vì trước đó. Sử dụng phương thức clone () lưu trữ một bản sao của lựa chọn thay vì một thể hiện của nó.

Chà, tại sao bạn không lưu trữ giá trị đã chọn hiện tại và khi mục được chọn thay đổi, bạn sẽ có giá trị cũ được lưu trữ? (và bạn có thể cập nhật lại nếu muốn)

Sử dụng mã sau đây, tôi đã kiểm tra nó và nó hoạt động

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

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

Tôi muốn đóng góp một lựa chọn khác để giải quyết vấn đề này; vì các giải pháp đề xuất ở trên không giải quyết được kịch bản của tôi.

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

Cái này không dùng jQuery sao cho def. là một phụ thuộc ở đây, nhưng điều này có thể được điều chỉnh để hoạt động trong javascript thuần. (Thêm người nghe vào phần thân, kiểm tra xem mục tiêu ban đầu có phải là chức năng chọn, thực thi không, ...).

Bằng cách gắn trình nghe thay đổi vào phần thân, bạn có thể chắc chắn điều này sẽ kích hoạt sau các trình nghe cụ thể cho các lựa chọn, nếu không, giá trị của 'dữ liệu trước đó' sẽ bị ghi đè trước khi bạn có thể đọc nó.

Tất nhiên, điều này là giả sử rằng bạn thích sử dụng các trình nghe riêng biệt cho giá trị đặt trước và giá trị kiểm tra của bạn. Nó phù hợp ngay với mô hình trách nhiệm duy nhất.

Lưu ý: Điều này bổ sung chức năng 'trước' này cho tất cả các lựa chọn, vì vậy hãy chắc chắn tinh chỉnh các bộ chọn nếu cần.

Đây là một cải tiến về câu trả lời @thisisboris. Nó thêm một giá trị hiện tại vào dữ liệu, vì vậy mã có thể kiểm soát khi một biến được đặt thành giá trị hiện tại bị thay đổi.

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

Giải pháp tốt nhất:

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

Có một số cách để đạt được kết quả mong muốn của bạn, đây là cách làm khiêm tốn của tôi:

Để phần tử giữ giá trị trước đó của nó, vì vậy hãy thêm một thuộc tính 'trướcValue'.

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

Sau khi được khởi tạo, 'trướcValue' giờ đây có thể được sử dụng làm thuộc tính. Trong JS, để truy cập Giá trị trước của mục này, hãy chọn:

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

Sau khi bạn hoàn thành việc sử dụng 'trướcValue', hãy cập nhật thuộc tính thành giá trị hiện tại.

Tôi cần tiết lộ một div khác nhau dựa trên lựa chọn

Đây là cách bạn có thể làm điều đó với cú pháp jquery và es6

HTML

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

Mã não

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