jQuery получить значение select onChange

Question

jQuery получить значение select onChange

615

У меня создалось впечатление, что я могу получить значение выбора ввода, выполнив это $(this).val(); и применив параметр onchange к полю select.

Казалось бы, он работает, только если я ссылаюсь на ID.

Как это сделать, используя это.

Robin Knight 24 июнь 2012, в 16:43

Источник

Теги:

jquery

select

13 ответов

73

У меня создалось впечатление, что я могу получить значение select введите это значение $(this).val();

Это работает, если вы подписываетесь ненавязчиво (это рекомендуемый подход):

$('#id_of_field').change(function() {
    // $(this).val() will work here
});

если вы используете onselect и смешиваете разметку с помощью script, вам нужно передать ссылку на текущий элемент:

onselect="foo(this);"

а затем:

function foo(element) {
    // $(element).val() will give you what you are looking for
}

Darin Dimitrov 24 июнь 2012, в 17:56

72

Мне это помогает.

Для выбора:

$('select_tags').on('change', function() {
    alert( $(this).find(":selected").val() );
});

Для радио/флажок:

$('radio_tags').on('change', function() {
    alert( $(this).find(":checked").val() );
});

ilgam 09 апр. 2015, в 12:37

3

Это помогло мне больше всего. не знал, что событие onChange не возвращает полный выбранный элемент.
DocRattie 10 авг. 2015, в 10:24
2

Если бы у некоторых были проблемы с использованием «this.value» напрямую, часто не использовалось бы обновленное значение. Это решило мою проблему.
LuqJensen 29 дек. 2016, в 16:45

12

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

$(document.body).on('change',"#selectID",function (e) {
   //doStuff
   var optVal= $("#selectID option:selected").val();
});

Krishna 17 март 2015, в 15:56

0

Этот работал, когда все другие варианты с более высоким рейтингом потерпели неудачу для меня.
Kaji 07 май 2018, в 20:26
0

@Kaji Это, вероятно, потому что вы вставили объект в DOM во время выполнения.
Fabian Bigler 26 окт. 2018, в 08:39

7

Вы можете попробовать это (используя jQuery) -

$('select').on('change', function()
{
    alert( this.value );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

Или вы можете использовать простой Javascript, как this-

function getNewVal(item)
{
    alert(item.value);
}

<select onchange="getNewVal(this);">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

Abrar Jahin 23 май 2016, в 04:13

4

Это то, что сработало для меня. Пробовал все остальное без везения:

<html>

  <head>
    <title>Example: Change event on a select</title>

    <script type="text/javascript">

      function changeEventHandler(event) {
        alert('You like ' + event.target.value + ' ice cream.');
      }

    </script>

  </head>

  <body>
    <label>Choose an ice cream flavor: </label>
    <select size="1" onchange="changeEventHandler(event);">
      <option>chocolate</option>
      <option>strawberry</option>
      <option>vanilla</option>
    </select>
  </body>

</html>

Взято из Mozilla

drjorgepolanco 25 янв. 2016, в 23:16

3

Для всех selects вызывается эта функция.

$('select').on('change', function()
{
    alert( this.value );
});

Только для одного выбора:

$('#select_id')

Ali Asad 14 фев. 2017, в 19:36

2

$('select_id').on('change', function()
{
    alert(this.value); //or alert($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="select_id">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

Ankit Pise 16 авг. 2016, в 15:10

2

Ищите jQuery сайт

HTML:

<form>
  <input class="target" type="text" value="Field 1">
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<div id="other">
  Trigger the handler
</div>

JAVASCRIPT:

$( ".target" ).change(function() {
  alert( "Handler for .change() called." );
});

Пример jQuery:

Чтобы добавить проверку достоверности ко всем элементам ввода текста:

$( "input[type='text']" ).change(function() {
  // Check input( $( this ).val() ) for validity here
});

Andre Mesquita 15 янв. 2015, в 15:47

1

Функция стрелки имеет область видимости, this.value от функции, this.value даст неопределенное значение для функции стрелки. Чтобы исправить использование

$('select').on('change',(event) => {
     alert( event.target.value );
 });

Sharuk Ahmed 16 авг. 2018, в 13:31

0

Я хочу добавить, кому нужна полная пользовательская функциональность заголовка

   function addSearchControls(json) {
        $("#tblCalls thead").append($("#tblCalls thead tr:first").clone());
        $("#tblCalls thead tr:eq(1) th").each(function (index) {
            // For text inputs
            if (index != 1 && index != 2) {
                $(this).replaceWith('<th><input type="text" placeholder=" ' + $(this).html() + ' ara"></input></th>');
                var searchControl = $("#tblCalls thead tr:eq(1) th:eq(" + index + ") input");
                searchControl.on("keyup", function () {
                    table.column(index).search(searchControl.val()).draw();
                })
            }
            // For DatePicker inputs
            else if (index == 1) {
                $(this).replaceWith('<th><input type="text" id="datepicker" placeholder="' + $(this).html() + ' ara" class="tblCalls-search-date datepicker" /></th>');

                $('.tblCalls-search-date').on('keyup click change', function () {
                    var i = $(this).attr('id');  // getting column index
                    var v = $(this).val();  // getting search input value
                    table.columns(index).search(v).draw();
                });

                $(".datepicker").datepicker({
                    dateFormat: "dd-mm-yy",
                    altFieldTimeOnly: false,
                    altFormat: "yy-mm-dd",
                    altTimeFormat: "h:m",
                    altField: "#tarih-db",
                    monthNames: ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"],
                    dayNamesMin: ["Pa", "Pt", "Sl", "Ça", "Pe", "Cu", "Ct"],
                    firstDay: 1,
                    dateFormat: "yy-mm-dd",
                    showOn: "button",
                    showAnim: 'slideDown',
                    showButtonPanel: true,
                    autoSize: true,
                    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
                    buttonImageOnly: false,
                    buttonText: "Tarih Seçiniz",
                    closeText: "Temizle"
                });
                $(document).on("click", ".ui-datepicker-close", function () {
                    $('.datepicker').val("");
                    table.columns(5).search("").draw();
                });
            }
            // For DropDown inputs
            else if (index == 2) {
                $(this).replaceWith('<th><select id="filter_comparator" class="styled-select yellow rounded"><option value="select">Seç</option><option value="eq">=</option><option value="gt">&gt;=</option><option value="lt">&lt;=</option><option value="ne">!=</option></select><input type="text" id="filter_value"></th>');

                var selectedOperator;
                $('#filter_comparator').on('change', function () {
                    var i = $(this).attr('id');  // getting column index
                    var v = $(this).val();  // getting search input value
                    selectedOperator = v;
                    if(v=="select")
                        table.columns(index).search('select|0').draw();
                    $('#filter_value').val("");
                });

                $('#filter_value').on('keyup click change', function () {
                    var keycode = (event.keyCode ? event.keyCode : event.which);
                    if (keycode == '13') {
                        var i = $(this).attr('id');  // getting column index
                        var v = $(this).val();  // getting search input value
                        table.columns(index).search(selectedOperator + '|' + v).draw();
                    }
                });
            }
        })

    }

dewelloper 17 дек. 2018, в 13:30

0

jQuery(document).ready(function(){

    jQuery("#id").change(function() {
      var value = jQuery(this).children(":selected").attr("value");
     alert(value);

    });
})

Virendra Yaduvanshi 04 авг. 2018, в 08:00

0

Обратите внимание, что если они не работают, это может быть из-за того, что DOM не загружен и ваш элемент еще не найден.

Чтобы исправить, поместите скрипт в конец тела или используйте готовый документ

$.ready(function() {
    $("select").on('change', function(ret) {  
         console.log(ret.target.value)
    }
})

Colin D 19 апр. 2018, в 15:40

Ещё вопросы

Это помогло мне больше всего. не знал, что событие onChange не возвращает полный выбранный элемент.
Если бы у некоторых были проблемы с использованием «this.value» напрямую, часто не использовалось бы обновленное значение. Это решило мою проблему.
Этот работал, когда все другие варианты с более высоким рейтингом потерпели неудачу для меня.
@Kaji Это, вероятно, потому что вы вставили объект в DOM во время выполнения.

thecodeparadox · Accepted Answer · 2012-06-24T18-21-00.000Z

1156

Лучший ответ

Попробуйте this-

$('select').on('change', function() {
  alert( this.value );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

Вы также можете сослаться на onchange event-

function getval(sel)
{
    alert(sel.value);
}

<select onchange="getval(this);">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

thecodeparadox 24 июнь 2012, в 18:21

13

Я знаю, что уже довольно поздно, но если вы используете клавиатуру (вкладки) для навигации по форме и используете стрелки вверх / вниз для выбора из выпадающего списка, то FireFox (22.0) не вызывает событие изменения. Вам необходимо дополнительно связать нажатие клавиш для FireFox. Дополнительная информация: jQuery 1.10.2 с использованием синтаксиса $ ('select'). On ('change', function () {/ * do seomthing * /});
MonkeyZeus 31 июль 2013, в 13:57
0

Ммм, пример jQuery не работает, и я уверен, что на моей странице правильно загружен файл 1.11 jQuery. В журналах JS моего браузера, я получил это: нет метода «вкл». Я пробовал это и на Firefox и Chrome, тот же результат. Это стандартное использование или оно было реализовано только в более новых версиях jquery? спасибо за ответ
Alex 27 март 2014, в 14:39
1

@MonkeyZeus Вам не нужно, он будет срабатывать, когда компонент потеряет фокус. From (метод изменения jQuery) [ api.jquery.com/change/] "Для полей выбора, флажков и переключателей событие вызывается немедленно, когда пользователь делает выбор с помощью мыши, но для других типов элементов событие откладывается до тех пор, пока элемент не потеряет фокус. И, конечно же, вы можете использовать вместо него ярлык .change() .
PhoneixS 03 авг. 2015, в 15:40
0

@ Алекс, вы делаете что-то не так, это было с jQuery 1.7, см. Api.jquery.com/on .
PhoneixS 03 авг. 2015, в 15:40
1

@PhoneixS Вы все еще используете FireFox 22.0?
MonkeyZeus 03 авг. 2015, в 16:04
0

@MonkeyZeus, ммм, нет. Я забыл, что через некоторое время это не было так стандартно в браузерах. Исправьте: «Для Firefox 39 вам не нужно это делать». ;)
PhoneixS 03 авг. 2015, в 16:28
0

@PhoneixS Я не уверен, что вы прочитали мой комментарий полностью. Я описываю процесс фокусировки на <select> и использую стрелки вверх / вниз, чтобы «изменить» выбор. Принуждение пользователя «размыть» от <select> для того, чтобы инициировать «изменение», приводит в бешенство UX. Представьте, что для хранения адресов используется поле <select> и оно было разработано для изменения содержимого элемента div после его «изменения». Это заставит пользователя постоянно нажимать Tab и Shift + Tab, чтобы увидеть разные детали адреса. Короче говоря, KEYPRESS все еще должен быть связан, если вы хотите обеспечить хороший UX.
MonkeyZeus 03 авг. 2015, в 16:48
0

@PhoneixS Пожалуйста, посмотрите пример здесь: jsfiddle.net/7d6guyma/1 Кроме того, кажется, что нажатие клавиш больше не работает, но скорее всего keyup демонстрирует желаемое поведение.
MonkeyZeus 03 авг. 2015, в 16:54
0

@MonkeyZeus Да, с точки зрения UX, которые вы видели, лучше связать их, чтобы пользователь мог видеть изменения, но во многих случаях вы не хотите этого делать. Например, если это страна, выберите, чтобы изменить видимость и макет формы. Может быть, лучше открыть вопрос об этом на сайте UX.
PhoneixS 03 авг. 2015, в 17:14
0

@PhoneixS Я считаю, что это скорее тема кросс-браузерной совместимости, чем тема UX; хотя UX-компонент очень важен для того, чтобы веб-приложение не чувствовало себя сломанным. IE и Chrome, кажется, вызывают «изменения» без необходимости в keyup. В любом случае вы обычно не будете связывать что-либо с выпадающим списком страны, но если вы это сделаете, вы захотите рассмотреть возможность включения ключа вместе с триггером изменения, поскольку это может повлиять на логику приложения за кулисами.
MonkeyZeus 03 авг. 2015, в 17:26
0

Давайте продолжим эту дискуссию в чате .
PhoneixS 04 авг. 2015, в 07:03
0

Что если этот выбор создается динамически? с тем же именем класса
maudev 12 окт. 2017, в 22:50
0

Просто помните, что DOM должен быть загружен, чтобы это работало. В этом случае: $(document).ready( function(){ ... }) ;
Cleybert Andre 07 март 2019, в 14:16

Показать ещё 11 комментариев