Jquery acara tukar kotak drop down

Peristiwa penukaran kotak lungsur jQuery ialah teknologi yang digunakan secara meluas dalam pembangunan web. Dalam reka bentuk web, selalunya perlu menggunakan kotak drop-down untuk memilih pilihan yang berbeza. Anda boleh menggunakan jQuery untuk mencetuskan peristiwa yang sepadan apabila pilihan kotak drop-down berubah, untuk mengemas kini atau menukar kandungan halaman web dalam masa nyata. Berikut akan memperkenalkan cara menggunakan jQuery untuk melaksanakan peristiwa perubahan kotak lungsur.

1. Operasi asas

Dalam jQuery, peristiwa perubahan kotak jatuh terutamanya dilaksanakan menggunakan kaedah change(). Kaedah ini dicetuskan apabila pilihan kotak lungsur berubah dan boleh melakukan beberapa operasi, seperti mengemas kini kandungan dalam halaman web, menunjukkan atau menyembunyikan elemen tertentu, dsb. Berikut ialah contoh program mudah yang menunjukkan cara menggunakan kaedah change():

<select id="selectBox">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

<p id="result"></p>

<script>
  $('#selectBox').change(function() {
    var selectedValue = $('#selectBox option:selected').val();
    $('#result').text('您选择的是：' + selectedValue);
  });
</script>

Dalam atur cara di atas, kotak lungsur pertama dicipta dengan tiga pilihan. Seterusnya, gunakan kaedah change() jQuery untuk mendengar acara perubahan pilihan pada kotak lungsur. Apabila pilihan berubah, dapatkan nilai yang dipilih pada masa ini dan paparkannya dalam perenggan dengan hasil id.

2. Peristiwa mengikat

Selain menggunakan kaedah change() secara langsung untuk mendengar peristiwa perubahan kotak lungsur, anda juga boleh menggunakan kaedah bind() atau on() untuk mengikat acara itu. Kedua-dua kaedah ini perlu menentukan jenis acara dan fungsi panggil balik apabila menggunakannya.

$('#selectBox').bind('change', function() {
  var selectedValue = $('#selectBox option:selected').val();
  $('#result').text('您选择的是：' + selectedValue);
});
//或者
$('#selectBox').on('change', function() {
  var selectedValue = $('#selectBox option:selected').val();
  $('#result').text('您选择的是：' + selectedValue);
});

3. Gunakan delegasi

Jika terdapat berbilang kotak lungsur pada halaman dan anda perlu mengikat acara yang sama kepada mereka, anda boleh menggunakan perwakilan acara. Delegasi acara merujuk kepada mengikat acara kepada unsur nenek moyang Apabila elemen anak di bawah elemen mencetuskan acara, pengendali acara akan dipanggil. Kaedah ini boleh mengurangkan bilangan pengikatan acara dan meningkatkan prestasi halaman web.

<div id="selectBoxes">
  <select class="selectBox">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
  </select>
  <select class="selectBox">
    <option value="4">选项4</option>
    <option value="5">选项5</option>
    <option value="6">选项6</option>
  </select>
</div>

<p class="result"></p>

<script>
  $('#selectBoxes').on('change', '.selectBox', function() {
    var selectedValue = $(this).find('option:selected').val();
    $(this).next('.result').text('您选择的是：' + selectedValue);
  });
</script>

Dalam kod di atas, elemen ancestor selectBoxes pertama kali dibuat dan dua kotak lungsur diletakkan di dalamnya. Kemudian, gunakan kaedah on() pada elemen untuk mendengar acara perubahan dan mewakilkan acara kepada elemen anak yang .classnya ialah selectBox. Apabila pilihan kotak lungsur berubah, dapatkan nilai yang dipilih pada masa ini dan paparkannya dalam elemen adik beradik seterusnya.hasil.

Ringkasan:

Peristiwa perubahan kotak lungsur jQuery ialah salah satu teknologi yang biasa digunakan dalam pembangunan web Dengan menggunakan teknologi ini, anda boleh mengemas kini atau menukar kandungan halaman web dalam masa nyata apabila pilihan berubah. Kaedah pelaksanaan khusus termasuk secara langsung menggunakan kaedah change(), menggunakan kaedah bind() atau on() untuk mengikat acara dan menggunakan perwakilan acara. Untuk halaman yang kompleks, disyorkan untuk menggunakan teknologi perwakilan acara untuk meningkatkan prestasi.

Atas ialah kandungan terperinci Jquery acara tukar kotak drop down. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!