jQuery cách hoàn tác thay đổi đã chọn

Question

Tôi có một hộp chọn và tôi muốn thêm xác nhận trước khi thay đổi nó thành một tùy chọn cụ thể. Ví dụ:

<select name="select"> 
    <option value="foo" selected="selected">foo</option> 
    <option value="bar">bar</option> 
</select>​​​​​​​​​​​​​​​​​​

$('select').change(function() { 
    var selected = $(this).val(); 

    if (selected == 'bar') { 
     if (!confirm('Are you sure?')) { 
      // set back to previously selected option 
     } 
    } 
});

Tôi đang nghĩ về việc thêm một trường nhập ẩn và cập nhật giá trị của nó mỗi khi chọn được thay đổi. Bằng cách đó tôi có thể lấy giá trị trước đó trong hàm change. Example:

<input type="hidden" name="current" value="foo" />

$('select').change(function() { 
    var selected = $(this).val(); 
    var current = $('input[name=current]').val(); 

    if (selected == 'bar') { 
     if (!confirm('Are you sure?')) { 
      $(this).val(current); 
      return false; 
     } 
    } 

    $('input[name=current]').val(selected); 
});

Có một/cách tốt hơn dễ dàng hơn để thực hiện điều này?

Answer 1

Thay vì sử dụng một biến toàn cầu (! Ác) hoặc một yếu tố ẩn (lạm dụng DOM), bạn có thể sử dụng $.data tính năng:

$('select').change(function() { 
    var selected = $(this).val(); 

    if (selected == 'bar') { 
     if (!confirm('Are you sure?')) { 
      $(this).val($.data(this, 'current')); 
      return false; 
     }  
    } 

    $.data(this, 'current', $(this).val()); 
}); 

Answer 2

Bạn có thể sử dụng biến thông thường thay vì đầu vào bị ẩn.

Answer 3

Tôi sẽ tạo một biến toàn cục và đặt nó thành giá trị của bộ chọn tại $ (tài liệu) .ready() ;. Sau đó, mỗi khi giá trị được thay đổi, bạn có thể thay đổi giá trị toàn cầu tương ứng.

Answer 4

cách Oldschool (trước khi chúng ta sử dụng jquery):

<select id="mySelect" onchange="if(confirm('Do you really want to change?')){ doSomething(); } else { this.selectedIndex=myIndex; }"> 
    <option value="foo" selected="selected">foo</option> 
    <option value="bar">bar</option> 
</select> 
<script type="text/javascript"> 
    var myIndex = $('mySelect').selectedIndex; 
</script> 

Answer 5

Tôi nghĩ rằng đây có thể là một cách khác để đạt được cùng. Mã này cũng sẽ hoàn tác chọn thay đổi.

<div class="selection"> 

      <input type="radio" class="selected" value="test1" name="test1" 
      checked="checked" /><label>test1</label> 

      <input type="radio" name="test1" value="test2" /><label> 
      test2</label> 

      <input type="radio" name="test1" value="test3" /><label> 
      test3</label> 

    </div> 

    $("input[name='test1']").change(function() { 
      var response = confirm("do you want to perform selection change"); 
      if (response) { 
       var container = $(this).closest("div.selection"); 
       //console.log(container); 
       //console.log("old sel =>" + $(container).find(".selected").val()); 
       $(container).find(".selected").removeClass("selected"); 
       $(this).addClass("selected"); 
       //console.log($(this).val()); 
       console.log("new sel =>" + $(container).find(".selected").val()); 
      } 
      else { 
       var container = $(this).closest("div.selection"); 
       $(this).prop("checked", false); 
       $(container).find(".selected").prop("checked", true); 
      } 
     }); 

Answer 6

Hy vọng điều này sẽ hữu ích.

$(YOUR_SELECT_ELEMENT).on({ 
    "ready": function (e) { 
     $(this).attr("readonly",true); 
    }, 
    "focus": function (e) { 
     $(this).data({ choice: $(this).val() }); 
    }, 
    "change": function (e) { 
     if (! confirm("Change selected option, proceed?")){ 
      $(this).val($(this).data('choice')); 
      return false; 
     } else { 
      $(this).attr("readonly",false); 
      return true; 
     } 
    } 
}); 

Tôi không chắc chắn 'return false' có hiệu quả để xóa thuộc tính 'chỉ đọc'.

Answer 7

$(document).on('change','.change_response_status',function() 
 
{ 
 
    var responseStatusId = this.id; 
 
    var responseID = $("#"+responseStatusId).attr('data-id'); 
 
    var previouesSatatus = $("#hidden_response_id_"+responseID).val(); 
 
    var confirmstatus = confirm("Are you sure you want to change status for this item?"); 
 
    var currentSelectedValue = $(this).val(); 
 

 
    if(confirmstatus==true) 
 
    { 
 
     $("#hidden_response_id_"+responseID).val(currentSelectedValue); 
 
    } 
 
    else 
 
    { 
 
     $(this).val(previouesSatatus); 
 
     $("#hidden_response_id_"+responseID).val(previouesSatatus); 
 
     return false; 
 
    } 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<select data-id="2" id="response_id_2" class="change_response_status" name="status"> 
 
    <option value="1">Accept</option> 
 
    <option value="2" selected="selected">No Respond</option> 
 
    <option value="3">Reject</option> 
 
</select> 
 
<input class="hidden_response_class" id="hidden_response_id_2" type="hidden" value="1" name="hidden_response_staus">

Đây là cách tốt nhất để hiển thị tùy chọn đã chọn trên nhấp chuột vào cancle trên hộp thoại xác nhận.