jquery select подія змінити отримати вибраний варіант

234

Я пов'язував подію на подію зміни моїх вибраних елементів із цим:

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

});

Як я можу отримати доступ до елемента, який був обраний, коли відбувається подія зміни?

jquery events

— Зулакіс
джерело

1

Чому ти так кажеш?

— Мігель

3

@superuberduper Я уникав jquery так довго, як міг, але опір марний. Ви відчуєте себе набагато краще після того, як будете засвоєні.

— ad

lolol @adg так добре!

— SuperUberDuper

460

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

— Нафталі ака Ніл
джерело

8

Що означає синтаксис $ ("селектор", цей)? Я маю загальне уявлення, але я не зовсім впевнений

— JoshWillik

14

@JoshWillik з $("selector", this)вами знаходять усі selectorелементи всередині thisконтексту. Написання $("selector", this)майже те саме, що $(this).find('selector')

— Беллаш

8

@JoshWillik: оскільки $()це псевдонім jQuery(), ви можете знайти тут документацію: api.jquery.com/jQuery Підпис, зазначений там, очевидно jQuery( selector [, context ] ). @Bellash: якщо це "майже те саме", яка різниця? Або що швидше? Я вважаю за краще, .find()оскільки це більше OO IMO ...

— Адріан Федер

7

Як перевірити у випадку кратного вибору?

— Hemant_Negi

3

@ AdrianFöder Для вас та інших людей, які шукають її, .find()приблизно на 10% швидше відповідно до цієї відповіді: stackoverflow.com/a/9046288/2767703

— Кевін ван Міерло

75

Можна скористатися методом пошуку jQuery

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

Наведене вище рішення прекрасно працює, але я вирішу додати наступний код для тих, хто бажає отримати опцію, що натиснув. Це дозволяє отримати вибраний варіант, навіть якщо це значення вибору не змінилося. (Тестується лише з Mozilla)

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

— Беллаш
джерело

Прив’язання до optionподій є ризикованою пропозицією, особливо на мобільних пристроях. Наприклад, Webkit не підтримує цю подію правильно: bugs.chromium.org/p/chromium/isissue/detail?id=5284

— Ian Kemp

ОК здорово! Як я вже сказав, друге рішення не підтримується у багатьох браузерах!

— Беллаш

15

Делегована альтернатива

У випадку, якщо хтось використовує делегований підхід для свого слухача, використовуйте e.target(він буде посилатися на елемент вибору).

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

— ДаніельST
джерело

+1, тому що це те, що я хочу, але коли я спробував це локально, його не працює. Тільки працюю на jsfiddle, що мені потрібно додати CDN?

— AVI

6

Я вважаю це коротшим і чистішим. Крім того, ви можете переглядати вибрані елементи, якщо їх більше;

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

— 1,44 Мб
джерело

selectedOptionsдоступний не у всіх браузерах.

— Бернхард Дьоблер

@ BernhardDöbler, які з них? будь-яке джерело?

— 1.44mb

1

Я скопіював ваш код в IE 11 і отримав помилку. Я закінчила с this.options[ this.options.selectedIndex ]. Mozilla каже, що підтримується Firefox з 26, IE Немає підтримки.

— Бернхард Дьоблер

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

Спочатку створіть select option. Після цього за допомогою jqueryви можете отримати поточне вибране значення, коли користувач змінить select optionзначення.

1

Ви можете поділитися детальніше поясненням вашої відповіді?

— Мостафіз

@MostafizurRahman мій код дуже простий, тому я написав тільки код.

3

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

— Сердар Карака
джерело

2

Ще один і короткий спосіб отримати значення вибраного значення,

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

— Прийом може
джерело

якщо це так, то чому не буде "var selectedVal = $ (" # selectElement "). val ()" work¿

— LuisE

Випадок отримує значення, коли подія зміни, що випромінюється на обраний елемент. Значення не оновлюється, якщо вибирати зміни, якщо вам це подобається.

— Recep Can

0

Дивіться офіційну документацію API https://api.jquery.com/selected-selector/

Це добре працює:

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

і

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

і бути простим для унікального вибору

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

— Алекс Россо
джерело

0

Ви можете використовувати цю подію зміни вибору jquery для отримання вибраного значення параметра

Для демонстрації

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

Розгорніть фрагмент

— Розробник
джерело