jquery select olayı değiştir seç seçeneği

234

Seçme öğelerimin değişiklik olayıyla ilgili bir olayı bununla bağladım:

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

});

Change olayı meydana geldiğinde seçilen öğeye nasıl erişebilirim?

jquery events

— Zulakis
kaynak

1

Bunu neden söyledin?

— Miguel

3

@superuberduper Jquery'den olabildiğince uzun süre kaçındım ama direniş nafile. Asimile olduktan sonra kendinizi çok daha iyi hissedeceksiniz.

— adg

lolol @adg çok iyi!

— SuperUberDuper

460

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

— Naftali aka Neal
kaynak

8

$ ("Selector", bu) sözdizimi ne anlama geliyor? Genel bir fikrim var, ama tam olarak emin değilim

— JoshWillik

14

@JoshWillik sizinle birlikte bağlam içindeki $("selector", this)tüm selectoröğeleri buluyor this. Yazmak $("selector", this)neredeyse aynı $(this).find('selector')

— Bellash

8

@JoshWillik: $()bir takma ad olduğundan jQuery(), belgeleri burada bulabilirsiniz: api.jquery.com/jQuery Açık bir şekilde belirtilen imza açıktır jQuery( selector [, context ] ). @Bellash: "neredeyse aynı" ise, fark nedir? Veya daha hızlı olan nedir? .find()Bu daha çok OO IMO olduğu için tercih ediyorum ...

— Adrian Föder

7

Çoklu seçim durumunda nasıl kontrol edilir?

— Hemant_Negi

3

@ AdrianFöder Siz ve diğer insanlar .find()için bu yanıta göre yaklaşık% 10 daha hızlı: stackoverflow.com/a/9046288/2767703

— Kevin van Mierlo

75

Sen kullanabilirsiniz jQuery bulmak yöntemi

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

Yukarıdaki çözüm mükemmel çalışıyor ama tıkladıkları seçeneği almak isteyen onlar için aşağıdaki kodu eklemeyi seçiyorum. Bu seçim değeri değişmemiş olsa bile seçilen seçeneği elde etmenizi sağlar. (Yalnızca Mozilla ile test edilmiştir)

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

— Bellash
kaynak

optionOlaylara bağlanmak , özellikle mobil cihazlarda riskli bir tekliftir. Örneğin, Webkit bu etkinliği doğru bir şekilde desteklemiyor: bugs.chromium.org/p/chromium/issues/detail?id=5284

— Ian Kemp

Tamam iyi! Dediğim gibi, ikinci çözüm pek çok tarayıcıda desteklenmiyor!

— Bellash

15

Devredilen Alternatif

Herhangi birinin dinleyicisi için yetki verilen yaklaşımı kullanması durumunda , kullanın e.target(select öğesine atıfta bulunacaktır).

$('#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 Demosu

— DanielST
kaynak

+1 çünkü bu istediğim şey, ama bunu yerel olarak denediğimde, çalışmıyor.

— AVI

6

Bunu daha kısa ve temiz buluyorum. Ayrıca, birden fazla varsa seçilen öğeler arasında yineleme yapabilirsiniz;

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

— 1.44 MB'lik
kaynak

selectedOptionstüm tarayıcılarda mevcut değildir.

— Bernhard Döbler

@ BernhardDöbler hangileri? herhangi bir kaynak?

— 1.44mb

1

Kodunuzu IE 11'e kopyaladım ve bir hata aldım. Ben sona erdi this.options[ this.options.selectedIndex ]. Mozilla , 26, IE'den Firefox tarafından desteklendiğini söylüyor Destek yok.

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

İlk önce bir select option. Bundan sonra jquerykullanıcı select optiondeğerini değiştirirken geçerli seçilen değeri alabilirsiniz .

1

Cevabınızın daha ayrıntılı açıklamasını paylaşır mısınız?

— Mostafiz

@MostafizurRahman kodumu çok kolay bu yüzden sadece kod yazdım.

3

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

— Serdar Karaca
kaynak

2

Seçilen değerin değerini almanın başka ve kısa bir yolu,

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

— Recep Can
kaynak

Bu durumda, neden "" "seçili olmazVal = $ (" # selectElement "). val ()" work¿

— LuisE 26:17 '

Select öğesinde değişiklik olayı yayınlandığında vaka değer kazanıyor. İsterseniz, seçim değiştiğinde değer güncellenmez.

— Recep Can

0

Resmi API belgelerine bakın https://api.jquery.com/selected-selector/

Bu iyi işler:

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

ve

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

ve benzersiz seçim için kolay olun

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

— alex Roosso
kaynak

0

Seçili seçenek değerini almak için bu jquery seçme değiştirme olayını kullanabilirsiniz

Demo için

$(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>

Snippet'i genişlet

— Geliştirici
kaynak