sự kiện Click trên một số yếu tố tùy chọn trong chrome

Question

Tôi đang gặp một vấn đề trong Chrome như sau:

var items = $("option", obj); 

items.each(function(){ 

    $(this).click(function(){ 

     // alert("test"); 
     process($(this).html()); 
     return false; 
    }); 
}); 

Sự kiện click dường như không để bắn trong Chrome, nhưng hoạt động trong Firefox.

Tôi muốn có thể click trên một yếu tố option từ tổ hợp, nếu tôi thay thế một loại phần tử khác, giả sử <li> hoạt động tốt. Ý tưởng nào? Cảm ơn.

Answer 1

Tôi không tin rằng sự kiện nhấp chuột hợp lệ trên các tùy chọn. Nó là hợp lệ, tuy nhiên, trên các yếu tố lựa chọn. Hãy thử cái này:

$("select#yourSelect").change(function(){ 
    process($(this).children(":selected").html()); 
}); 

Answer 2

Chúng ta có thể thực hiện theo cách này bất chấp sự kiện gọi trực tiếp với <select>.

JS phần:

$("#sort").change(function(){ 

    alert('Selected value: ' + $(this).val()); 
}); 

HTML phần:

<select id="sort"> 
    <option value="1">View All</option> 
    <option value="2">Ready for Review</option> 
    <option value="3">Registration Date</option> 
    <option value="4">Last Modified</option> 
    <option value="5">Ranking</option> 
    <option value="6">Reviewed</option> 
</select> 

Answer 3

gì thường làm việc cho tôi là trước hết phải thay đổi giá trị của thả xuống, ví dụ

$('#selectorForOption').attr('selected','selected')

và sau đó kích hoạt một sự thay đổi

$('#selectorForOption').changed()

Bằng cách này, bất kỳ javascript đó là dây để

Answer 4

Có lẽ một trong những phiên bản jquery mới hỗ trợ sự kiện click vào tùy chọn . Nó làm việc cho tôi:

$(document).on("click","select option",function() { 
    console.log("nice to meet you, console ;-)"); 
}); 

CẬP NHẬT: Một người dùng có thể gửi biểu mẫu html và các giá trị được chèn vào cơ sở dữ liệu. Tuy nhiên, một hoặc nhiều giá trị được đặt theo mặc định và bạn gắn cờ các mục nhập tự động này. Bạn cũng hiển thị cho người dùng rằng mục nhập của anh ta được tạo tự động, nhưng nếu anh ta xác nhận mục nhập bằng cách nhấp vào tùy chọn đã chọn, bạn thay đổi cờ trong cơ sở dữ liệu. Một trường hợp hiếm kiện, nhưng có thể ...

Answer 5

<select id="myselect"> 
    <option value="0">sometext</option> 
    <option value="2">Ready for Review</option> 
    <option value="3">Registration Date</option> 
</select> 

$('#myselect').change(function() { 
    if($('#myselect option:selected').val() == 0) { 
    ... 
    } 
    else { 
    ... 
    } 
}); 

Answer 6

tôi thấy rằng sau đây làm việc cho tôi - thay vào sử dụng trên nhấp chuột, sử dụng về biến đổi ví dụ:

jQuery('#element select').on('change', (function() { 

     //your code here 

})); 

Answer 7

Tôi biết rằng đoạn mã này hoạt động để nhận ra một nhấp chuột tùy chọn (ít nhất là trong Chrome và FF). Hơn nữa, nó hoạt động nếu phần tử không có trên tải DOM. Tôi thường sử dụng điều này khi tôi nhập các phần đầu vào vào một phần tử chọn duy nhất và tôi không muốn nhấn vào tiêu đề của phần.

$(document).on('click', 'option[value="disableme"]', function(){ 
    $('option[value="disableme"]').prop("selected", false); 
}); 

Answer 8

Tôi gặp vấn đề về simmilar. change sự kiện không tốt cho tôi vì tôi cần làm mới một số dữ liệu khi người dùng nhấp vào option.Sau vài thử nghiệm tôi đã có giải pháp này:

$('select').on('click',function(ev){ 
    if(ev.offsetY < 0){ 
     //user click on option 
    }else{ 
     //dropdown is shown 
    } 
}); 

Tôi đồng ý rằng đây là rất xấu xí và bạn nên gắn bó với change sự kiện mà bạn có thể, nhưng điều này giải quyết vấn đề của tôi.

Answer 9

Vì $(this) không chính xác nữa với chức năng mũi tên ES6 không có cùng số this hơn function() {}, bạn không nên sử dụng $ (this) nếu bạn sử dụng cú pháp ES6.
Bên cạnh theo chính thức của jQuery anwser, có một cách đơn giản hơn để làm điều đó câu trả lời hàng đầu cho biết.
Cách tốt nhất để có được những html của một lựa chọn lựa chọn là sử dụng

$('#yourSelect option:selected').html(); 

Bạn có thể thay html() bởi text() hoặc bất cứ điều gì khác mà bạn muốn (nhưng html() là trong câu hỏi ban đầu).
Chỉ cần thêm trình xử lý sự kiện change, với phương thức viết tắt của jQuery change(), để kích hoạt mã của bạn khi thay đổi tùy chọn đã chọn.

$ ('#yourSelect').change(() => { 
    process($('#yourSelect option:selected').html()); 
    }); 

Nếu bạn chỉ muốn biết giá trị của option:selected (tùy chọn mà người dùng đã chọn), bạn chỉ có thể sử dụng $('#yourSelect').val()

Answer 10

Cách đơn giản để thay đổi lựa chọn, và cập nhật nó là thế này.

// BY id 
$('#select_element_selector').val('value').change(); 

một ví dụ khác:

//By tag 
$('[name=selectxD]').val('value').change(); 

một ví dụ khác:

$("#select_element_selector").val('value').trigger('chosen:updated'); 

Answer 11

Cách giải quyết:

$('#select_id').on('change', (function() { $(this).children(':selected').trigger('click'); }));

Answer 12

Looking for này vào năm 2018. Nhấp vào sự kiện trên thẻ tùy chọn, bên trong thẻ được chọn, không được kích hoạt trên Chrome.

Sử dụng sự kiện thay đổi, và nắm bắt được phương án chọn:

$(document).delegate("select", "change", function() { 
    //capture the option 
    var $target = $("option:selected",$(this)); 
}); 

Hãy nhận biết rằng $ mục tiêu có thể là một bộ sưu tập của các đối tượng nếu chọn thẻ là nhiều.