jquery chọn sự kiện thay đổi nhận tùy chọn

234

Tôi đã ràng buộc một sự kiện về sự kiện thay đổi của các yếu tố được chọn của tôi với điều này:

$('select').on('change', '', function (e) {

});

Làm cách nào tôi có thể truy cập phần tử được chọn khi sự kiện thay đổi xảy ra?

jquery events

— Zulakis
nguồn

1

Tại sao bạn nói vậy?

— Miguel

3

@superuberduper Tôi tránh jquery càng lâu càng tốt nhưng sự phản kháng là vô ích. Bạn sẽ cảm thấy tốt hơn rất nhiều sau khi bạn bị đồng hóa.

— adg

lolol @adg rất tốt!

— SuperUberDuper

459

$('select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    ....
});

— Naftali aka Neal
nguồn

8

Cú pháp $ ("bộ chọn", cái này) có nghĩa là gì? Tôi có một ý tưởng chung, nhưng tôi không hoàn toàn chắc chắn

— JoshWillik

14

@JoshWillik với $("selector", this)bạn đang tìm thấy tất cả các selectoryếu tố bên trong thisbối cảnh. Viết $("selector", this)gần giống như $(this).find('selector')

— Bellash

8

@JoshWillik: vì $()là bí danh của jQuery(), bạn có thể tìm tài liệu ở đây: api.jquery.com/jQuery Chữ ký được nêu rõ ràng là có jQuery( selector [, context ] ). @Bellash: nếu nó "gần giống nhau", thì sự khác biệt là gì? Hay cái gì nhanh hơn? Tôi thích .find()vì đây là OO IMO nhiều hơn ...

— Adrian Föder

7

Làm thế nào để kiểm tra trong trường hợp nhiều lựa chọn?

— Hemant_Negi

3

@ AdrianFöder Dành cho bạn và những người khác đang tìm kiếm nó, .find()nhanh hơn khoảng 10% theo câu trả lời này: stackoverflow.com/a/9046288/2767703

— Kevin van Mierlo

75

Bạn có thể sử dụng phương thức tìm jQuery

 $('select').change(function () {
     var optionSelected = $(this).find("option:selected");
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
 });

Giải pháp trên hoạt động hoàn hảo nhưng tôi chọn thêm mã sau đây để họ sẵn sàng nhận tùy chọn đã nhấp. Nó cho phép bạn có được tùy chọn đã chọn ngay cả khi giá trị chọn này không thay đổi. (Chỉ được thử nghiệm với Mozilla)

    $('select').find('option').click(function () {
     var optionSelected = $(this);
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
   });

— Tiếng chuông
nguồn

Liên kết với optioncác sự kiện là một đề xuất rủi ro, đặc biệt là trên các thiết bị di động. Ví dụ: Webkit không hỗ trợ chính xác sự kiện này: bug.chromium.org/p/chromium/issues/detail?id=5284

— Ian Kemp

Được rồi Như tôi đã nói, giải pháp thứ hai không được hỗ trợ trong nhiều trình duyệt!

— Bellash

15

Ủy nhiệm thay thế

Trong trường hợp bất cứ ai đang sử dụng phương pháp ủy nhiệm cho người nghe của họ, hãy sử dụng e.target(nó sẽ đề cập đến phần tử chọn).

$('#myform').on('change', 'select', function (e) {
    var val = $(e.target).val();
    var text = $(e.target).find("option:selected").text(); //only time the find is required
    var name = $(e.target).attr('name');
}

Trình diễn JSFiddle

— DanielST
nguồn

+1 vì đây là những gì tôi muốn, nhưng khi tôi thử nó cục bộ, nó không hoạt động. Chỉ hoạt động tại jsfiddle, tôi phải thêm CDN vào cái gì?

— AVI

6

Tôi thấy điều này ngắn hơn và sạch hơn. Ngoài ra, bạn có thể lặp qua các mục đã chọn nếu có nhiều mục;

$('select').on('change', function () {
     var selectedValue = this.selectedOptions[0].value;
     var selectedText  = this.selectedOptions[0].text;
});

— 1,44mb
nguồn

selectedOptionskhông có sẵn trong tất cả các trình duyệt.

— Bernhard Döbler

@ BernhardDöbler cái nào? nguồn nào?

— 1,44mb

1

Tôi đã sao chép mã của bạn sang IE 11 và gặp lỗi. Tôi đã kết thúc với this.options[ this.options.selectedIndex ]. Mozilla cho biết được Firefox hỗ trợ từ 26, IE Không hỗ trợ.

— Bernhard Döbler

6

<select id="selectId">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>


$('#selectId').on('change', function () {
     var selectVal = $("#selectId option:selected").val();
});

Đầu tiên tạo a select option. Sau đó, jquerybạn có thể nhận giá trị được chọn hiện tại khi người dùng thay đổi select optiongiá trị.

bạn có thể vui lòng chia sẻ giải thích chi tiết hơn về câu trả lời của bạn?

— Mostafiz

@MostafizurRahman mã của tôi rất dễ dàng đó là lý do tại sao tôi chỉ viết mã.

3

$('#_SelectID').change(function () {
        var SelectedText = $('option:selected',this).text();
        var SelectedValue = $('option:selected',this).val();
});

— Serdar Karaca
nguồn

2

Một cách khác và ngắn để lấy giá trị của giá trị được chọn,

$('#selectElement').on('change',function(){
   var selectedVal = $(this).val();
                       ^^^^  ^^^^ -> presents #selectElement selected value 
                         |
                         v
               presents #selectElement, 
});

— Recep có thể
nguồn

nếu đây là trường hợp, tại sao sẽ không "var selectVal = $ (" # selectEuity "). val ()" làm việc¿

— LuisE

Trường hợp nhận được giá trị khi sự kiện thay đổi phát ra trên phần tử được chọn. Giá trị sẽ không được cập nhật khi chọn thay đổi nếu bạn làm như vậy.

— Recep có thể

0

Xem tài liệu API chính thức https://api.jquery.com/selected-selector/

Công việc tốt này:

$( "select" ).on('change',function() {
  var str = "";
  // For multiple choice
  $( "select option:selected" ).each(function() {
    str += $( this ).val() + " "; 
  });
});

và

$( "select" ).on('change',function() {
  // For unique choice
  var selVal = $( "select option:selected" ).val(); 
});

và dễ dàng cho sự lựa chọn độc đáo

var SelVal = $( "#idSelect option:selected" ).val();

— alex Roosso
nguồn

0

Bạn có thể sử dụng sự kiện thay đổi chọn jquery này để nhận giá trị tùy chọn đã chọn

Đối với bản demo

$(document).ready(function () {   
    $('body').on('change','#select', function() {
         $('#show_selected').val(this.value);
    });
});

<!DOCTYPE html>  
<html>  
<title>Learn Jquery value Method</title>
<head> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
</head>  
<body>  
<select id="select">
 <option value="">Select One</option>
    <option value="PHP">PHP</option>
    <option value="jAVA">JAVA</option>
    <option value="Jquery">jQuery</option>
    <option value="Python">Python</option>
    <option value="Mysql">Mysql</option>
</select>
<br><br>  
<input type="text" id="show_selected">
</body>  
</html>

Mở rộng đoạn trích

— Nhà phát triển
nguồn