web-dev-qa-db-ja.com

jQueryはselect onChangeの値を取得します

この$(this).val();を実行してonchangeパラメーターをselectフィールドに適用することで、選択入力の値を取得できるという印象を受けました。

IDを参照した場合にのみ機能するようです。 

これを使用してどのようにしますか。

jqueryselect
644
Robin Knight

これを試して-

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

1275
thecodeparadox

この$（this）.val（）;を実行することでselect 入力の値を取得できるという印象を受けました。

邪魔にならないように購読している場合、これは機能します（これが推奨されるアプローチです）。

$('#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
}
78
Darin Dimitrov

これは私にとって助けになります。

選択の場合：

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

ラジオ/チェックボックスの場合：

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

イベントの委譲方法を試してください。これはほとんどすべての場合に機能します。

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

あなたはこれを試すことができます（ 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>

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

これは私のために働いたものです。運なしで他のすべてを試みました：

<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

5
drjorgepolanco

すべての選択に対して、この機能を呼び出します。

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

1つだけ選択してください：

$('#select_id')
4
Ali Asad

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>

ジャバスクリプト：

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

jQueryの例：

すべてのテキスト入力要素に妥当性テストを追加するには

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

Arrow関数はfunctionとは異なるスコープを持っています、 this.valueはarrow関数に対して未定義を与えます。 

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

これらが機能していない場合は、DOMがロードされておらず、要素がまだ見つからなかった可能性があります。

修正するには、スクリプトを本文の最後に置くか、document readyを使用してください。

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

私は追加したい、完全カスタムヘッダー機能を必要とする人

   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はChangeイベントを使用してselect html要素の値を取得します

デモ＆その他の例

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