jquery menambah kawalan bawahan

Dalam pembangunan bahagian hadapan, kita selalunya perlu menambah pelbagai kawalan pada halaman. Dalam teknologi pembangunan bahagian hadapan, jQuery ialah salah satu perpustakaan js yang paling banyak digunakan, dengan banyak kelebihan seperti kemudahan penggunaan, fleksibiliti dan kebolehskalaan. Artikel ini terutamanya memperkenalkan cara menggunakan jQuery untuk menambah kawalan bawahan.

1. Tambahkan kotak lungsur turun

Dalam jQuery, anda boleh membuat kotak senarai lungsur turun dengan mudah melalui teg pilih. Anda boleh menambah pilihan pada pilihan menggunakan kaedah tambah dalam jQuery.

Sebagai contoh, kod berikut menambahkan elemen pilihan pada kotak senarai juntai bawah dengan id pilih melalui gelung.

<select id="select">
</select>

<script>
  for (var i = 1; i <= 10; i++) {
    $('#select').append('<option value="' + i + '">选项 ' + i + '</option>');
  }
</script>

Kod di atas akan menambah 10 pilihan untuk dipilih, dengan nilai dan kandungan paparan setiap pilihan antara 1 hingga 10 masing-masing.

2. Tambahkan kotak pilihan

Anda boleh menggunakan teg kotak semak untuk membuat kotak pilihan dengan mudah dalam jQuery. Anda boleh menambah elemen input[type=checkbox] pada bekas kotak semak menggunakan kaedah tambah dalam jQuery.

Sebagai contoh, kod berikut menambahkan elemen kotak pilihan pada bekas dengan kotak semak id-bekas melalui gelung.

<div id="checkbox-container">
</div>

<script>
  for (var i = 1; i <= 5; i++) {
    $('#checkbox-container').append('<input type="checkbox" id="checkbox' + i + '">');
    $('#checkbox-container').append('<label for="checkbox' + i + '">选项' + i + '</label>');
    $('#checkbox-container').append('<br>');
  }
</script>

Kod di atas akan menambah 5 kotak pilihan pada bekas, setiap satu dengan label dan pemisah baris yang sepadan.

3. Tambahkan butang radio

Anda boleh menggunakan tag radio untuk membuat butang radio dengan mudah dalam jQuery. Anda boleh menambah elemen input[type=radio] pada bekas butang radio menggunakan kaedah tambah dalam jQuery.

Sebagai contoh, kod berikut menambahkan elemen radio pada bekas dengan bekas radio id melalui gelung.

<div id="radio-container">
</div>

<script>
  for (var i = 1; i <= 5; i++) {
    $('#radio-container').append('<input type="radio" name="radio" id="radio' + i + '">');
    $('#radio-container').append('<label for="radio' + i + '">选项' + i + '</label>');
    $('#radio-container').append('<br>');
  }
</script>

Kod di atas akan menambah 5 kotak butang radio pada bekas, setiap kotak butang radio mempunyai label dan pemisah baris yang sepadan. Perlu diingatkan bahawa untuk kotak butang radio, atribut nama mereka perlu ditetapkan kepada nilai yang sama supaya sistem boleh menentukan sama ada ia tergolong dalam kumpulan yang sama.

4. Tambah kotak input

Anda boleh menggunakan teg input untuk membuat pelbagai kotak input dengan mudah dalam jQuery. Anda boleh menambah elemen input pada bekas kotak input menggunakan kaedah tambah dalam jQuery.

Sebagai contoh, kod berikut menambahkan elemen input[type=text] dan textarea pada bekas dengan bekas input id melalui gelung.

<div id="input-container">
</div>

<script>
  $('#input-container').append('<input type="text" id="input1">');
  $('#input-container').append('<br>');
  $('#input-container').append('<textarea id="input2"></textarea>');
  $('#input-container').append('<br>');
</script>

Kod di atas akan menambah kotak input teks dan kotak input medan teks pada bekas.

Ringkasan

Di atas adalah pengenalan ringkas untuk menggunakan jQuery untuk menambah kawalan bawahan. Dengan mengkaji kandungan artikel ini, anda boleh dengan mudah menguasai cara menggunakan jQuery untuk melanjutkan fungsi halaman. Walau bagaimanapun, ini hanyalah puncak gunung ais aplikasi jQuery Masih terdapat banyak kandungan yang kaya menunggu untuk kita terokai dan gunakan.

Atas ialah kandungan terperinci jquery menambah kawalan bawahan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!