jquery wybierz zmień zdarzenie wybierz opcję

234

Związałem zdarzenie ze zdarzeniem zmiany wybranych elementów:

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

});

Jak mogę uzyskać dostęp do elementu, który został wybrany, gdy nastąpi zdarzenie zmiany?

jquery events

— Zulakis
źródło

1

Dlaczego tak mówisz?

— Miguel

3

@ superuberduper Unikałem jquery tak długo, jak mogłem, ale opór jest daremny. Po zasymilowaniu poczujesz się o wiele lepiej.

— adg

lolol @adg tak dobrze!

— SuperUberDuper

460

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

— Naftali alias Neal
źródło

8

Co oznacza składnia $ („selektor”, ta)? Mam ogólny pomysł, ale nie jestem całkowicie pewien

— JoshWillik

14

@JoshWillik z $("selector", this)tobą znajdujesz wszystkie selectorelementy w thiskontekście. Pisanie $("selector", this)jest prawie takie samo jak $(this).find('selector')

— Bellash

8

@JoshWillik: ponieważ $()jest to pseudonim jQuery(), dokumentację można znaleźć tutaj: api.jquery.com/jQuery Podpis podany jest oczywiście jQuery( selector [, context ] ). @Bellash: jeśli jest „prawie taki sam”, jaka jest różnica? A co jest szybsze? Wolę, .find()ponieważ jest to więcej OO IMO ...

— Adrian Föder

7

Jak sprawdzić w przypadku wielokrotnego wyboru?

— Hemant_Negi

3

@ AdrianFöder Dla ciebie i innych osób, które go szukają, .find()jest około 10% szybszy zgodnie z tą odpowiedzią: stackoverflow.com/a/9046288/2767703

— Kevin van Mierlo

75

Możesz użyć metody wyszukiwania jQuery

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

Powyższe rozwiązanie działa idealnie, ale wybieram dodanie następującego kodu, aby uzyskać gotową opcję kliknięcia. Pozwala uzyskać wybraną opcję, nawet jeśli ta wybrana wartość nie uległa zmianie. (Testowane tylko z Mozillą)

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

— Bellash
źródło

Powiązanie ze optionzdarzeniami jest ryzykowną propozycją, szczególnie na urządzeniach mobilnych. Na przykład Webkit nie obsługuje tego zdarzenia poprawnie: bugs.chromium.org/p/chromium/issues/detail?id=5284

— Ian Kemp

Ok fajnie! Jak powiedziałem, drugie rozwiązanie nie jest obsługiwane w wielu przeglądarkach!

— Bellash

15

Delegowana alternatywa

Jeśli ktoś używa delegowanego podejścia do swojego detektora, użyj e.target(będzie odnosił się do elementu select).

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

JSFiddle Demo

— DanielST
źródło

+1, ponieważ tego właśnie chcę, ale kiedy spróbowałem tego lokalnie, nie działa. Tylko w jsfiddle, jakie są CDN, które muszę dodać?

— AVI,

6

Uważam to za krótsze i czystsze. Poza tym możesz iterować wybrane elementy, jeśli jest ich więcej niż jeden;

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

— 1,44mb
źródło

selectedOptionsnie jest dostępny we wszystkich przeglądarkach.

— Bernhard Döbler,

@ BernhardDöbler które? jakieś źródło?

— 1.44mb,

1

Skopiowałem twój kod do IE 11 i dostałem błąd. Skończyło się z this.options[ this.options.selectedIndex ]. Mozilla mówi, że jest obsługiwany przez Firefox od 26, IE Brak wsparcia.

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

Najpierw utwórz select option. Po tym użyciu jquerymożesz uzyskać bieżącą wybraną wartość, gdy użytkownik zmieni select optionwartość.

1

czy możesz podzielić się bardziej szczegółowym wyjaśnieniem swojej odpowiedzi?

— Mostafiz

@MostafizurRahman mój kod jest bardzo łatwy, dlatego napisałem tylko kod.

3

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

— Serdar Karaca
źródło

2

Kolejny i krótki sposób na uzyskanie wartości wybranej wartości,

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

— Recep Can
źródło

jeśli tak jest, to dlaczego nie „var selectedVal = $ („ # selectElement ”). val ()„ praca ”

— LuisE

Sprawa zyskuje na wartości, gdy zdarzenie zmiany emitowane na elemencie select. Wartość nie byłaby aktualizowana po wybraniu zmian, jeśli to zrobisz.

— Recep Can

0

Zobacz oficjalną dokumentację API https://api.jquery.com/selected-selector/

To dobre działa:

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

i

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

i być łatwym w wyborze

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

— alex Roosso
źródło

0

Możesz użyć tego zdarzenia zmiany wyboru jquery, aby uzyskać wybraną wartość opcji

Na 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>

Rozwiń fragment kodu

— Deweloper
źródło