JQuery выбрать изменить событие получить выбранный вариант

235

Я связал событие в событии изменения моих элементов выбора с этим:

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

});

Как я могу получить доступ к элементу, который был выбран, когда происходит событие изменения?

jquery events

— Zulakis
источник

1

Почему ты сказал это?

— Мигель

3

@superuberduper Я избегал jquery так долго, как мог, но сопротивление бесполезно. Вы будете чувствовать себя намного лучше после того, как вас ассимилируют.

— ADG

LOLOL @ ADG так хорошо!

— SuperUberDuper

461

$('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()так как это больше ОО ИМО ...

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

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

— Bellash
источник

Привязка к optionсобытиям является рискованным предложением, особенно на мобильных устройствах. Например, Webkit не поддерживает это событие правильно: bugs.chromium.org/p/chromium/issues/detail?id=5284

— Ян Кемп

Ладно, круто! Как я уже сказал, второе решение не поддерживается во многих браузерах!

— Беллаш

15

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

Если кто-то использует делегированный подход для своего слушателя, используйте e.target(это будет ссылаться на элемент 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
источник

+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, 
});

— Recep Can
источник

если это так, то почему "var selectedVal = $ (" # selectElement "). val ()" work¿

— LuisE

Случай получает значение, когда событие change отправляется на элемент select. Значение не будет обновляться при выборе изменений, если вам это нравится.

— 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 select change для получения значения выбранного параметра

Для демо

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

Развернуть фрагмент

— разработчик
источник