Làm thế nào để chọn lại được chọn tùy chọn

Question

Tiêu đề có vẻ khó hiểu nhưng những gì tôi muốn làm là ...

tôi biết làm thế nào để xử lý chỉ khi người dùng chọn tùy chọn mới với điều này - $('select').change(function(){}) .`

Nhưng không phải nếu người dùng muốn chọn tùy chọn đã được chọn.

Tôi cũng đã thử với radio nhưng cũng vậy.

Được rồi, ví dụ: tôi có lựa chọn có tùy chọn (đỏ, xanh dương, xanh lục).

<select> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="green">GREEN</option> 
</select> 

và tôi có kịch bản này:

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

Khi tôi chọn tùy chọn 'xanh' nó cảnh báo cho một giá trị 'xanh', sau đó tôi chọn 'xanh' nó cảnh báo 'xanh' là tốt. nhưng khi tôi chọn 'xanh' một lần nữa không có gì xảy ra.

Answer 1

Câu hỏi này đến với sự chú ý của tôi vì đây là công cụ khá cơ bản nhưng không ai thực sự đào sâu vào nó nữa. OP đã sử dụng change(), nhưng khi bạn chọn lại tùy chọn đã chọn hiện tại, không có gì được kích hoạt!

Tôi đã thử click(), nhưng nó kích hoạt trước khi bạn thậm chí có thể chọn một tùy chọn.

Với blur(), sau khi bạn chọn xong, không có gì được kích hoạt vì phần tử chọn vẫn đang được tập trung, vì vậy bạn cần tập trung như nhấp vào bên ngoài để thực thi.

Vì vậy, tôi vừa đề xuất OP chuyển sang kiểu nhập radio sau đó xử lý thực thi với sự kiện click(). Bằng cách đó bạn vẫn có thể chọn lại nút radio đã đánh dấu. Tuy nhiên, sau đó tôi nhận thấy rằng bạn chỉ cần nhấp chuột lần hai vào yếu tố <select> vì nhấp chuột đầu tiên sẽ mở danh sách thả xuống tùy chọn nhấp chuột thứ hai trả về giá trị của tùy chọn bạn đã chọn. Vì vậy, tôi đã đưa ra với điều này:

$('select').click(function(){ 
    var $this = $(this); 

    if ($this.hasClass('open')) { 
     alert($this.val()); 
     $this.removeClass('open'); 
    }else { 
     $this.addClass('open'); 
    } 
}); 

Nhưng bây giờ vấn đề là khi bạn lần đầu tiên bấm vào <select> thả xuống đang được showned và chúng tôi cũng đã thêm lớp 'open'. Sau đó nhấp vào nơi khác (không chọn tùy chọn) trình đơn thả xuống sẽ bị ẩn nên khi bạn nhấp lại vào <select> sự kiện sẽ được kích hoạt trước khi bạn thậm chí có thể chọn một tùy chọn.

Vì vậy, tôi đã thêm mã này để khắc phục điều đó:

$(document).click(function(e){ 
    var $select = $('select'); 

    if (!$select.is(e.target)){ 
     $select.removeClass('open'); //reset the steps by removing open 
    } 
}); 

Bạn có thể kiểm tra nó ra trong jsfiddle này. Chúc mừng!

---

Tôi nghĩ rằng khi <select> mất trọng tâm của nó cũng là một mối quan tâm. Vì vậy, tôi đã thêm sự kiện blur(). Xem bản cập nhật này jsfiddle

Answer 2

Trong trường hợp không có gì xảy ra khi người dùng chọn tùy chọn đã chọn, tôi cho rằng đó là "tính năng" của DOM thay vì lỗi không có Sự kiện xảy ra.Tuy nhiên, nếu mã của bạn đang làm nhiều hơn với <select> hơn là lựa chọn đơn giản, nó cũng là một mối phiền toái, vì vậy tôi biết ơn những người khác đã giải quyết nó ở đây.

Các current accepted answer là thông minh trong việc sử dụng các sự kiện nhấp chuột để chụp lựa chọn một <select> tùy chọn đã chọn, nhưng nếu bạn sẵn sàng để xác định độ dài của danh sách của bạn như (trong trường hợp này) <select size=3>, bạn có thể chỉ cần đặt giá trị đã chọn thành "" từ sự kiện "thay đổi" của bạn và lựa chọn tương tự sẽ kích hoạt mọi lúc.

Trong trường hợp này the OP's example sẽ thay đổi để:

HTML:

<select size=3> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="green">GREEN</option> 
</select> 

jQuery:

$('select').change(function(){ 
    var val = $(this).val(); 
    alert(val); 
    $('select').val(""); 
}); 

duy nhất tác dụng phụ là các yếu tố lựa chọn bây giờ có thể hiển thị cho người dùng ba hàng thay vì một hàng.

(Tín dụng chuyển đến Kirby L. Wallace để biết ý tưởng thiết lập lựa chọn value thành "").