wake-up-neo.com

jQuery liefert den Wert von select onChange

Ich hatte den Eindruck, dass ich den Wert einer Select-Eingabe erhalten kann, indem Sie diese $(this).val(); ausführen und den Parameter onchange auf das Select-Feld anwenden.

Anscheinend funktioniert es nur, wenn ich auf die ID verweise. 

Wie mache ich das?.

jqueryselect
644
Robin Knight

Versuche dies-

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

Sie können auch mit onchange event- referenzieren.

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

1275
thecodeparadox

Ich hatte den Eindruck, dass ich den Wert eines select bekommen konnte Eingabe durch Ausführen von $ (this) .val ();

Dies funktioniert, wenn Sie unauffällig abonnieren (was der empfohlene Ansatz ist):

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

wenn Sie onselect verwenden und Markup mit Skript mischen, müssen Sie einen Verweis auf das aktuelle Element übergeben:

onselect="foo(this);"

und dann:

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

Das wird mir geholfen.

Für wählen:

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

Für Radio/Checkbox:

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

Versuchen Sie es mit der Ereignisdelegierungsmethode. Dies funktioniert in fast allen Fällen.

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

Sie können dies versuchen (mit 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>

Oder Sie können einfach Javascript wie dieses verwenden-

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>

8
Abrar Jahin

Das hat bei mir funktioniert. Alles andere ohne Glück versucht:

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

Aus Mozilla

5
drjorgepolanco

Rufen Sie für alle Auswahlmöglichkeiten diese Funktion auf.

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

Für nur eine auswählen:

$('#select_id')
4
Ali Asad

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

das Beispiel von jQuery:

So fügen Sie allen Texteingabeelementen einen Gültigkeitstest hinzu:

$( "input[type='text']" ).change(function() {
  // Check input( $( this ).val() ) for validity here
});
3
Andre Mesquita
$('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>
3
Ankit Pise

Die Pfeilfunktion hat einen anderen Gültigkeitsbereich als die Funktion. this.value wird für eine Pfeilfunktion undefined undefined angeben 

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

Wenn diese nicht funktionieren, kann dies daran liegen, dass das DOM nicht geladen wurde und Ihr Element noch nicht gefunden wurde.

Um das Problem zu beheben, stellen Sie das Skript am Ende des Hauptteils oder verwenden Sie das Dokument fertig

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

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

    });
})
0
Virendra Yaduvanshi

Ich möchte Folgendes hinzufügen: Wer benötigt die vollständige benutzerdefinierte Header-Funktionalität

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

    }
0
dewelloper

jQuery ruft den Wert ausgewählter HTML-Elemente ab, indem es das Ereignis Change verwendet

Für Demo & More Beispiel

$(document).ready(function () {   
    $('body').on('change','#select_box', function() {
         $('#show_only').val(this.value);
    });
}); 
<!DOCTYPE html>  
<html>  
<title>jQuery Select OnChnage Method</title>
<head> 
 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>    
</head>  
<body>  
<select id="select_box">
 <option value="">Select One</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
    <option value="Four">Four</option>
    <option value="Five">Five</option>
</select>
<br><br>  
<input type="text" id="show_only" disabled="">
</body>  
</html>
0
Devendra Dode