Cara mengikat bingkai bootstrap

Kotak drop-down Bootstrap boleh terikat menggunakan jQuery atau JavaScript tulen. Menggunakan jQuery, memuatkan perpustakaan jQuery dan mengikat kotak dropdown: $ (fungsi () {$ ('#dropdown'). ('Show.bs.dropdown', function () {// mengikat pengendali acara});}); Menggunakan JavaScript tulen, dapatkan elemen kotak dropdown dan mengikat pendengar acara: const dropdown = document.getElementById ('dropdown'); dropdown

Cara Mengikat Kotak Drop-Down Menggunakan Bootstrap

Kotak drop-down bootstrap adalah komponen yang membolehkan pengguna memilih satu atau lebih item dari senarai pilihan. Untuk mengikat kotak drop-down, anda boleh menggunakan rangka kerja JavaScript seperti JQuery atau JavaScript Pure.

Menggunakan jQuery

1. Muatkan perpustakaan jQuery

Pastikan perpustakaan jQuery dimuatkan di laman web.

2. Mengikat kotak drop-down

 <code class="javascript">$(function() { $('#dropdown').on('show.bs.dropdown', function() { // 绑定事件处理程序}); });</code>

Menggunakan JavaScript tulen

1. Dapatkan elemen kotak drop-down

 <code class="javascript">const dropdown = document.getElementById('dropdown');</code>

2. Mengikat pendengar acara

 <code class="javascript">dropdown.addEventListener('show.bs.dropdown', function(event) { // 绑定事件处理程序});</code>

Pengendali acara mengikat

Pengendali acara akan dipecat apabila kotak drop-down dipaparkan. Di sini anda boleh melaksanakan logik yang anda mahukan, seperti:

• Muatkan data secara asynchronously dan isi pilihan kotak drop-down
• Sahkan pilihan yang dipilih
• Bertindak balas terhadap input pengguna

Contoh

 <code class="javascript">$('#dropdown').on('show.bs.dropdown', function() { // 使用AJAX 加载数据$.ajax({ url: 'data.json', success: function(data) { // 填充下拉框选项$.each(data, function(index, value) { $('#dropdown').append($('<option>').val(value).text(value)); }); } }); });</option></code>

Dengan mengikuti langkah-langkah ini, anda boleh menggunakan Bootstrap untuk mengikat kotak drop-down dan menyesuaikan tingkah lakunya seperti yang diperlukan.

Atas ialah kandungan terperinci Cara mengikat bingkai bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!