jquery pilih ubah acara dapatkan opsi yang dipilih

235

Saya mengikat acara pada acara perubahan elemen pilih saya dengan ini:

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

});

Bagaimana saya bisa mengakses elemen yang dipilih ketika acara perubahan terjadi?

jquery events Zulakis
sumber
1
Kenapa kamu mengatakan itu?
Miguel
3
@superuberduper Saya menghindari jquery selama yang saya bisa tetapi perlawanan itu sia-sia. Anda akan merasa jauh lebih baik setelah Anda berasimilasi.
adg
lolol @ adg begitu bagus!
SuperUberDuper

Jawaban:

461 
$('select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    ....
});
Naftali alias Neal
sumber
8
Apa arti sintaks $ ("selector", this)? Saya punya ide umum, tapi saya tidak sepenuhnya yakin
JoshWillik
14
@ JoshWillik dengan $("selector", this)Anda menemukan semua selectorelemen di dalam thiskonteks. Menulis $("selector", this)hampir sama dengan $(this).find('selector')
Bellash
8
@ Josh Willik: karena $()adalah alias dari jQuery(), Anda dapat menemukan dokumentasi di sini: api.jquery.com/jQuery Tanda tangan menyatakan ada jelas jQuery( selector [, context ] ). @ Bellash: jika "hampir sama", apa bedanya? Atau apa yang lebih cepat? Saya lebih suka .find()karena ini lebih OO IMO ...
Adrian Föder
7
Bagaimana cara memeriksa jika ada beberapa pilihan?
Hemant_Negi
3
@ AdrianFöder Bagi Anda dan orang lain yang mencarinya, .find()sekitar 10% lebih cepat sesuai dengan jawaban ini: stackoverflow.com/a/9046288/2767703
Kevin van Mierlo
75

Anda dapat menggunakan metode pencarian jQuery

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

Solusi di atas berfungsi dengan baik tetapi saya memilih untuk menambahkan kode berikut untuk mereka yang mau mendapatkan opsi yang diklik. Ini memungkinkan Anda mendapatkan opsi yang dipilih bahkan ketika nilai pilih ini tidak berubah. (Diuji hanya dengan Mozilla)

    $('select').find('option').click(function () {
     var optionSelected = $(this);
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
   });
Bellash
sumber
Mengikat optionacara adalah proposisi yang berisiko, terutama pada perangkat seluler. Misalnya, Webkit tidak mendukung acara ini dengan benar: bugs.chromium.org/p/chromium/issues/detail?id=5284
Ian Kemp
OK keren! Seperti yang saya katakan, solusi kedua tidak didukung di banyak browser!
Bellash
15

Alternatif yang didelegasikan

Jika ada orang yang menggunakan pendekatan yang didelegasikan untuk pendengar mereka, gunakan e.target(itu akan merujuk pada elemen pilih).

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

Demo JSFiddle

DanielST
sumber
1 karena ini yang saya inginkan, tetapi ketika saya mencoba ini secara lokal, itu tidak berfungsi. Hanya bekerja di jsfiddle, apa yang harus saya tambahkan CDN?
AVI
6

Saya menemukan ini lebih pendek dan lebih bersih. Selain itu, Anda dapat beralih melalui item yang dipilih jika ada lebih dari satu;

$('select').on('change', function () {
     var selectedValue = this.selectedOptions[0].value;
     var selectedText  = this.selectedOptions[0].text;
});
1,44mb
sumber
selectedOptionstidak tersedia di semua browser.
Bernhard Döbler
@ BernhardDöbler yang mana? sumber apa saja?
1.44mb
1
Saya menyalin kode Anda ke IE 11 dan mendapat kesalahan. Saya berakhir dengan this.options[ this.options.selectedIndex ]. Mozilla mengatakan didukung oleh Firefox dari 26, IE Tidak ada dukungan.
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();
});

Pertama buat a select option. Setelah itu menggunakan jqueryAnda bisa mendapatkan nilai yang dipilih saat ini ketika pengguna mengubah select optionnilai.


sumber
1
dapatkah Anda membagikan penjelasan yang lebih detail tentang jawaban Anda?
Mostafiz
@MostafizurRahman kode saya sangat mudah itu sebabnya saya hanya menulis kode.
3 
$('#_SelectID').change(function () {
        var SelectedText = $('option:selected',this).text();
        var SelectedValue = $('option:selected',this).val();
});
Serdar Karaca
sumber
2

Cara lain dan singkat untuk mendapatkan nilai dari nilai yang dipilih, 

$('#selectElement').on('change',function(){
   var selectedVal = $(this).val();
                       ^^^^  ^^^^ -> presents #selectElement selected value 
                         |
                         v
               presents #selectElement, 
});
Recep Can
sumber
jika ini masalahnya, mengapa tidak "var selectedVal = $ (" # selectElement "). val ()" work¿
LuisE
Kasing ini mendapatkan nilai saat perubahan acara dipancarkan pada elemen tertentu. Nilai tidak akan diperbarui saat memilih perubahan jika Anda suka.
Recep Can
0

Lihat dokumentasi API resmi https://api.jquery.com/selected-selector/

Ini bekerja dengan baik:

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

dan

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

dan mudah untuk pilihan unik

var SelVal = $( "#idSelect option:selected" ).val();
alex Roosso
sumber
0

Anda dapat menggunakan acara perubahan pemilihan jquery ini untuk mendapatkan nilai opsi yang dipilih

Untuk 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>
Luaskan cuplikan

Pengembang
sumber