Pemicu ubah acara <select> menggunakan jquery

146

adakah di sana saya bisa memicu perubahan acara pada kotak pilih pada halaman memuat dan pilih opsi tertentu.

Juga fungsi dieksekusi dengan menambahkan pelatuk setelah mengikat fungsi ke acara.

Saya mencoba menampilkan sesuatu seperti ini

<select class="check">
<option value="one">one</option>
<option value="two">two</option>
</select>

$(function(){
    $('.check').trigger('change'); //This event will fire the change event. 
    $('.check').change(function(){
      var data= $(this).val();
      alert(data);            
    });
});

http://jsfiddle.net/v7QWd/1/

jquery Kishanio
sumber
Anda ingin mengatur opsi tertentu saat memuat? atau Anda ingin memicu acara perubahan Anda?
Pastori
Bisakah Anda memperluas solusi akhir. Apakah Anda mencoba memiliki opsi yang dipaksakan saat halaman dimuat, atau memilih opsi yang berbeda ketika sesuatu yang spesifik dipilih?
Matthew Riches
hai, terima kasih atas tanggapan Anda, saya dapat memecahkan masalah dan telah mendokumentasikannya.
kishanio

Jawaban:

288

Gunakan val()untuk mengubah ke nilai (bukan teks) dan trigger()untuk secara manual memecat acara.

Pengatur acara perubahan harus dideklarasikan sebelum pemicu.

Ini contohnya

$('.check').change(function(){
  var data= $(this).val();
  alert(data);            
});

$('.check')
    .val('two')
    .trigger('change');
Joseph
sumber
Juga setelah mengubah opsi saya ingin menjalankan fungsi perubahan acara. WRT ini . kotak peringatan harus dijalankan.
kishanio
@KishanThobhani Anda harus memanggilnya setelah menambahkan pawang. lihat sampel.
Joseph
7
Bagian penting dari solusi ini adalah: Pengganti event handler HARUS dinyatakan SEBELUM pemicu (masuk akal ...), dalam kasus saya itu masalahnya, terima kasih!
Larzan
Itu membantu sebagai Juru Selamat, Terima kasih @ Joseph
Divya
fungsi perubahan didefinisikan SEBELUM Anda menggunakan, memecahkan masalah saya. Terima kasih.
Kamlesh
28

Untuk memilih opsi, gunakan .val('value-of-the-option')pada elemen pilih. Untuk memicu elemen perubahan, gunakan .change()atau .trigger('change').

Masalah dalam kode Anda adalah koma alih-alih titik $('.check'),trigger('change');dan fakta bahwa Anda menyebutnya sebelum mengikat pengendali acara.

Pencuri
sumber
10 
$('#edit_user_details').find('select').trigger('change');

Ini akan mengubah item drop-down tag html pilih dengan id="edit_user_details".

Sohail xIN3N
sumber
7

Solusi kerja lain untuk mereka yang diblokir dengan pemicu pemicu jQuery, bahwa kebakaran pada kejadian asli akan seperti di bawah ini (100% berfungsi):

var sortBySelect = document.querySelector("select.your-class"); 
sortBySelect.value = "new value"; 
sortBySelect.dispatchEvent(new Event("change"));
Mohamed23gharbi
sumber
1
Saya mencoba semua hal di atas, tetapi hanya yang ini yang berhasil untuk saya. Saya pikir, karena pilih saya ada di dalam vue. Terima kasih @ Mohamed23gharbi!
Tillito
1
Sama disini. Ini adalah solusi yang saya cari selama satu jam. Terima kasih.
mberna
1
Ini perlu jawabannya!
MARS
1

Berikan tautan sesuai nilai tag opsi

<select size="1" name="links" onchange="window.location.href=this.value;">
   <option value="http://www.google.com">Google</option>
   <option value="http://www.yahoo.com">Yahoo</option>
</select>
Afraz Ahmad
sumber
1

Jika Anda ingin melakukan beberapa pemeriksaan, gunakan cara ini

 <select size="1" name="links" onchange="functionToTriggerClick(this.value)">
    <option value="">Select a Search Engine</option>        
    <option value="http://www.google.com">Google</option>
    <option value="http://www.yahoo.com">Yahoo</option>
</select>

<script>

   function functionToTriggerClick(link) {

     if(link != ''){
        window.location.href=link;
        }
    }  

</script>
Afraz Ahmad
sumber
0

Berdasarkan jawaban Mohamed23gharbi:

function change(selector, value) {
    var sortBySelect = document.querySelector(selector);
    sortBySelect.value = value;
    sortBySelect.dispatchEvent(new Event("change"));
}

function click(selector) {
    var sortBySelect = document.querySelector(selector);
    sortBySelect.dispatchEvent(new Event("click"));
}

function test() {
    change("select#MySelect", 19);
    click("button#MyButton");
    click("a#MyLink");
}

Dalam kasus saya, di mana elemen diciptakan oleh vue, ini adalah satu-satunya cara yang berfungsi.

Tillito
sumber
0

Anda dapat mencoba kode di bawah ini untuk menyelesaikan masalah Anda:

Secara default, opsi pertama pilih: jQuery ('. Select'). Find ('option') [0] .selected = true;

Terima kasih, Ketan T

Ketan Tambekar
sumber