jQuery获取select onChange的值

I was under the impression that I could get the value of a select input by doing this $(this).val(); and applying the onchange parameter to the select field.

我的印象是，通过执行$(this).val()，我可以获得选择输入的值;并将onchange参数应用到select字段。

It would appear it only works if I reference the ID.

它只在我引用ID时才有效。

How do I do it using this.

我怎么用这个。

10 个解决方案

#1

1115

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

You can also reference with onchange event-

您也可以引用onchange事件-

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

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

#2

I was under the impression that I could get the value of a select input by doing this $(this).val();

我的印象是，通过执行$(this).val()，我可以获得选择输入的值;

This works if you subscribe unobtrusively (which is the recommended approach):

如果您不引人注目地订阅(这是推荐的方法)，这是可行的:

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

if you use onselect and mix markup with script you need to pass a reference to the current element:

如果使用onselect和混合标记与脚本，则需要将引用传递给当前元素:

onselect="foo(this);"

and then:

然后:

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

#3

This is helped for me.

这对我有帮助。

For select:

选择:

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

For radio/checkbox:

广播/复选框:

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

#4

Try the event delegation method, this works in almost all cases.

尝试使用事件委托方法，这几乎适用于所有情况。

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

#5

You can try this (using jQuery)-

您可以尝试这个(使用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>

Or can use simple Vavascript like this-

或者可以像这样使用简单的Vavascript

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

This is what worked for me. Tried everything else with no luck:

这对我起了作用。什么都试过了，运气不好:

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

Taken from Mozilla

来自Mozilla

#7

For all selects, invoke this function.

对于所有选择，调用此函数。

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

For only one select:

只有一个选择:

$('#select_id')

#8

Look for jQuery site

寻找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's example:

jQuery的例子:

To add a validity test to all text input elements:

将有效性测试添加到所有文本输入元素:

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

#9

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

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

#10

Note that if these are not working, it might be because the DOM has not loaded and your element was not found yet.

请注意，如果这些都不起作用，可能是因为DOM还没有加载，您的元素还没有找到。

To fix, put the script at the end of body or use document ready

要修复，请将脚本放在正文的末尾，或者使用准备好的文档

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

#1