发表新帖
发表新帖

Getting value of select (dropdown) before change

后端 未结
关注
18 2462
无人共我
无人共我 2020-11-22 08:56

The thing I want to achieve is whenever the

提交评论
  •  加载中...
  • 予麋鹿
    2020-11-22 09:16

    This is an improvement on @thisisboris answer. It adds a current value to data, so the code can control when a variable set to the current value is changed. 

    (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() );
        }
    );
})();
    0 讨论(0)
  • 被撕碎了的回忆
    2020-11-22 09:18

    Combine the focus event with the change event to achieve what you want:

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

    Working example: http://jsfiddle.net/x5PKf/766

    0 讨论(0)
  • 庸人自扰
    2020-11-22 09:18 
    (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();
})();
    0 讨论(0)
  • 后悔当初
    2020-11-22 09:24

    I'd like to contribute another option to solve this issue; since the solutions proposed above did not solve my scenario.

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

    This does use jQuery so that def. is a dependency here, but this can be adapted to work in pure javascript. (Add a listener to the body, check if the original target was a select, execute function, ...).

    By attaching the change listener to the body, you can pretty much be sure this will fire after specific listeners for the selects, otherwise the value of 'data-previous' will be overwritten before you can even read it.

    This is of course assuming that you prefer to use separate listeners for your set-previous and check-value. It fits right in with the single-responsibility pattern.

    Note: This adds this 'previous' functionality to all selects, so be sure to fine-tune the selectors if needed.

    0 讨论(0)
  • 不思量自难忘°
    2020-11-22 09:24

    Best solution:

    $('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);
});
    0 讨论(0)
    • 上一页 1 2 3
     看不清?
    提交回复
    热议问题