jQuery get value of select onChange

Question

jQuery get value of select onChange

Miałem wrażenie, że mogłem uzyskać wartość wejścia select, wykonując to $(this).val(); i stosując parametr onchange do pola select.

Wygląda na to, że działa tylko wtedy, gdy odwołuję się do ID.

Jak to zrobić używając tego.

590

jquery select

Author: thecodeparadox, 2012-06-24

Source

12 answers

Miałem wrażenie, że mogę uzyskać wartość select wejście przez wykonanie tego $(this).val ();

To działa, jeśli subskrybujesz dyskretnie (co jest zalecane podejście):

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

Jeśli używasz onselect i mieszasz znaczniki ze skryptem, musisz przekazać odwołanie do bieżącego elementu:

onselect="foo(this);"

A następnie:

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

74

Author: Darin Dimitrov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-24 17:03:51

To mi pomaga.

Dla wyboru:

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

Dla radia / checkbox:

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

68

Author: ilgam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-09 12:21:34

Wypróbuj metodę delegowania zdarzeń, działa to prawie we wszystkich przypadkach.

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

12

Author: Krishna,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-20 00:21:24

Możesz spróbować tego (używając 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>

Lub możesz użyć prostego Javascript w ten sposób -

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

Author: Abrar Jahin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-20 10:32:33

To mi się udało. Próbowałem wszystkiego innego bez powodzenia:

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

Zaczerpnięte z Mozilla

4

Author: drjorgepolanco,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-25 22:11:25

Dla wszystkich selektów, wywołaj tę funkcję.

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

Dla tylko jednego wyboru:

$('#select_id')

3

Author: Ali Asad,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-02 16:20:30

Poszukaj jQuery site

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." );
});

Przykład JQuery:

Aby dodać test ważności do wszystkich elementów wprowadzania tekstu:

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

2

Author: Andre Mesquita,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-31 07:57:53

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

Author: Ankit Pise,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-08 06:37:43

Funkcja Strzałki ma inny zakres niż funkcja, this.value Da undefined dla funkcji strzałki. Aby naprawić użycie

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

1

Author: Sharuk Ahmed,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-16 13:01:47

Zauważ, że jeśli one nie działają, może to być spowodowane tym, że DOM nie został załadowany, a twój element nie został jeszcze znaleziony.

Aby naprawić, umieść skrypt na końcu body lub użyj document ready

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

0

Author: Colin D,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-19 15:04:02

jQuery(document).ready(function(){

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

    });
})

0

Author: Virendra Yaduvanshi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-04 07:13:44

score 1172 · Accepted Answer

Spróbuj tego-

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

Możesz również odwołać się do zdarzenia onchange -

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

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