jQuery mendapatkan nilai select onChange

779

Saya mendapat kesan bahwa saya bisa mendapatkan nilai input pilih dengan melakukan ini $(this).val();dan menerapkan onchangeparameter ke bidang pilih.

Tampaknya hanya berfungsi jika saya referensi ID.

Bagaimana saya melakukannya menggunakan ini.

jquery select RIK
sumber

1492

Coba ini-

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

Luaskan cuplikan

Anda juga dapat referensi dengan onchange event-

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

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

Luaskan cuplikan

theodeparadox
sumber

15

Saya tahu ini cukup terlambat tetapi jika Anda menggunakan keyboard (tab) untuk menavigasi formulir dan menggunakan panah atas / bawah untuk memilih dari daftar dropdown maka FireFox (22.0) tidak memicu perubahan acara. Anda juga harus mengikat penekanan tombol untuk FireFox. Info Tambahan: jQuery 1.10.2 menggunakan sintaks $ ('select'). On ('change', function () {/ * do seomthing * /});

MonkeyZeus

Mhh bagi saya, contoh jQuery tidak berfungsi, dan saya yakin saya sudah mendapatkan file jQuery 1,11 dengan benar dimuat di halaman saya. Dalam log JS browser saya, saya mendapatkan ini: tidak memiliki metode 'on'. Saya mencobanya di Firefox dan Chrome, hasilnya sama. Apakah ini penggunaan standar atau hanya diterapkan di versi jquery yang lebih baru? thx untuk balasan

Alex

2

@MonkeyZeus Anda tidak perlu, itu akan menjadi pemicu ketika komponen kehilangan fokus. Dari (metode perubahan jQuery) [ api.jquery.com/change/] "Untuk kotak pilih, kotak centang, dan tombol radio, acara tersebut dipecat segera ketika pengguna membuat pilihan dengan mouse, tetapi untuk elemen lainnya ketik acara tersebut ditangguhkan sampai elemen kehilangan fokus. " Dan tentu saja, Anda bisa menggunakan .change()pintasan saja.

PhoneixS

@Alex Anda melakukan sesuatu yang salah, sudah sejak jQuery 1.7 lihat api.jquery.com/on .

PhoneixS

1

@PhoneixS Apakah Anda masih menggunakan FireFox 22.0?

MonkeyZeus

103

Saya mendapat kesan bahwa saya bisa mendapatkan nilai input pilih dengan melakukan $ ini (ini) .val ();

Ini berfungsi jika Anda berlangganan secara tidak mencolok (yang merupakan pendekatan yang disarankan):

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

jika Anda menggunakan onselectdan mencampur markup dengan skrip, Anda harus memberikan referensi ke elemen saat ini:

onselect="foo(this);"

lalu:

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

Darin Dimitrov
sumber

99

Ini membantu saya.

Untuk pilih:

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

Untuk radio / kotak centang:

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

ilgam
sumber

Saya memasukkan '#' dalam kode saya $ ('# select_tags'). On ('change', function ()

Daleman

16

Coba metode delegasi acara, ini bekerja di hampir semua kasus.

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

Krishna
sumber

10

Anda dapat mencoba ini (menggunakan 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>

Luaskan cuplikan

Atau Anda dapat menggunakan Javascript sederhana seperti ini-

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>

Luaskan cuplikan

Abrar Jahin
sumber

10

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

Ankit Pise
sumber

9

Fungsi panah memiliki cakupan yang berbeda dari fungsi, this.valueakan memberikan undefined untuk fungsi panah. Untuk memperbaiki penggunaan

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

Sharuk Ahmed
sumber

6

Inilah yang bekerja untuk saya. Mencoba yang lain tanpa hasil:

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

Diambil dari Mozilla

drjorgepolanco
sumber

6

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

Contoh jQuery:

Untuk menambahkan tes validitas ke semua elemen input teks:

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

Andre Mesquita
sumber

6

Untuk semua pilihan, aktifkan fungsi ini.

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

Untuk hanya satu pilih:

$('#select_id')

Ali Asad
sumber

4

jQuery mendapatkan nilai elemen html tertentu menggunakan pada acara Change

Untuk Demo & Contoh Lainnya

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

Luaskan cuplikan

Pengembang
sumber

3

Perhatikan bahwa jika ini tidak berfungsi, itu mungkin karena DOM belum dimuat dan elemen Anda belum ditemukan.

Untuk memperbaikinya, letakkan skrip di ujung badan atau gunakan dokumen siap

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

Colin D
sumber

2

jQuery(document).ready(function(){

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

    });
})

Virendra Yaduvanshi
sumber

2

Biarkan saya berbagi contoh yang saya kembangkan dengan BS4, thymeleaf, dan boot Spring.

Saya menggunakan dua SELECT, di mana yang kedua ("subtopik") diisi oleh panggilan AJAX berdasarkan pemilihan yang pertama ("topik").

Pertama, potongan thymeleaf:

 <div class="form-group">
     <label th:for="topicId" th:text="#{label.topic}">Topic</label>
     <select class="custom-select"
             th:id="topicId" th:name="topicId"
             th:field="*{topicId}"
             th:errorclass="is-invalid" required>
         <option value="" selected
                 th:text="#{option.select}">Select
         </option>
         <optgroup th:each="topicGroup : ${topicGroups}"
                   th:label="${topicGroup}">
             <option th:each="topicItem : ${topics}"
                     th:if="${topicGroup == topicItem.grp} "
                     th:value="${{topicItem.baseIdentity.id}}"
                     th:text="${topicItem.name}"
                     th:selected="${{topicItem.baseIdentity.id==topicId}}">
             </option>
         </optgroup>
         <option th:each="topicIter : ${topics}"
                 th:if="${topicIter.grp == ''} "
                 th:value="${{topicIter.baseIdentity.id}}"
                 th:text="${topicIter.name}"
                 th:selected="${{topicIter.baseIdentity?.id==topicId}}">
         </option>
     </select>
     <small id="topicHelp" class="form-text text-muted"
            th:text="#{label.topic.tt}">select</small>
</div><!-- .form-group -->

<div class="form-group">
    <label for="subtopicsId" th:text="#{label.subtopicsId}">subtopics</label>
    <select class="custom-select"
            id="subtopicsId" name="subtopicsId"
            th:field="*{subtopicsId}"
            th:errorclass="is-invalid" multiple="multiple">
        <option value="" disabled
                th:text="#{option.multiple.optional}">Select
        </option>
        <option th:each="subtopicsIter : ${subtopicsList}"
                th:value="${{subtopicsIter.baseIdentity.id}}"
                th:text="${subtopicsIter.name}">
        </option>
    </select>
    <small id="subtopicsHelp" class="form-text text-muted"
           th:unless="${#fields.hasErrors('subtopicsId')}"
           th:text="#{label.subtopics.tt}">select</small>
    <small id="subtopicsIdError" class="invalid-feedback"
           th:if="${#fields.hasErrors('subtopicsId')}"
           th:errors="*{subtopicsId}">Errors</small>
</div><!-- .form-group -->

Saya mengulangi daftar topik yang disimpan dalam konteks model, menunjukkan semua grup dengan topik mereka, dan setelah itu semua topik yang tidak memiliki grup. BaseIdentity adalah BTW kunci komposit @Embedded.

Sekarang, inilah jQuery yang menangani perubahan:

$('#topicId').change(function () {
    selectedOption = $(this).val();
    if (selectedOption === "") {
        $('#subtopicsId').prop('disabled', 'disabled').val('');
        $("#subtopicsId option").slice(1).remove(); // keep first
    } else {
        $('#subtopicsId').prop('disabled', false)
        var orig = $(location).attr('origin');
        var url = orig + "/getsubtopics/" + selectedOption;
        $.ajax({
            url: url,
           success: function (response) {
                  var len = response.length;
                    $("#subtopicsId option[value!='']").remove(); // keep first 
                    for (var i = 0; i < len; i++) {
                        var id = response[i]['baseIdentity']['id'];
                        var name = response[i]['name'];
                        $("#subtopicsId").append("<option value='" + id + "'>" + name + "</option>");
                    }
                },
                error: function (e) {
                    console.log("ERROR : ", e);
                }
        });
    }
}).change(); // and call it once defined

Panggilan perubahan awal () memastikan akan dieksekusi pada pemuatan ulang halaman atau jika suatu nilai telah dipilih sebelumnya oleh beberapa inisialisasi di backend.

BTW: Saya menggunakan validasi formulir "manual" (lihat "is-valid" / "is-invalid"), karena saya (dan pengguna) tidak suka bahwa BS4 menandai bidang kosong yang tidak diperlukan sebagai hijau. Tapi itu byond lingkup Q ini dan jika Anda tertarik maka saya dapat mempostingnya juga.

4 sel otak
sumber

1

Saya ingin menambahkan, yang membutuhkan fungsionalitas tajuk khusus penuh

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

    }

Hamit YILDIRIM
sumber

jQuery mendapatkan nilai select onChange

Jawaban: