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

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

казалось бы, это работает только если я ссылку на идентификатор.

Как это сделать с помощью этого.

590
jquery select

12 ответов

попробуйте это-

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

function getval(sel)
{
    alert(sel.value);
}
<select onchange="getval(this);">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>
1172

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

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

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

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

onselect="foo(this);"

и затем:

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

это помогло мне.

для выберите:

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

переключатель радио/:

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

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

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

вы можете попробовать это (используя 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, как это-

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>
6

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

<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

4

для всех selects вызовите эту функцию.

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

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

$('#select_id')
3

ищите 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
});
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>
2

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

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

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

чтобы исправить, поместите скрипт в конец тела или используйте document ready

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

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

    });
})
0