Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk membuat teg pilih berkembang secara lalai dalam javascript
Bagaimana untuk membuat teg pilih berkembang secara lalai dalam javascript
- PHPzasal
- 2023-04-25 18:18:592870semak imbas
Dalam HTML, elemen
Kaedah pelaksanaan:
1 Gunakan atribut autofokus HTML5
Cara paling mudah ialah menggunakan atribut autofokus HTML5. Atribut ini secara automatik boleh menetapkan fokus pada kotak input, butang, senarai juntai bawah dan elemen lain yang ditentukan selepas halaman dimuatkan. Untuk membuat
<select autofocus> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>
2. Menggunakan kod JavaScript
Apabila kita perlu mengembangkan elemen
<select id="mySelect">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<script>
document.getElementById('mySelect').size = document.getElementById('mySelect').length;
</script>
Kod di atas secara automatik mengembangkan senarai juntai bawah dengan menetapkan saiznya (saiz) kepada bilangan pilihannya (panjang). Sudah tentu, anda juga boleh menggunakan kaedah lain untuk mencapai kesan yang sama, seperti menetapkan atribut pilihan, atau menggunakan gaya CSS, dsb.
3. Kembangkan
Kadangkala kita perlu mengembangkan
<select id="mySelect">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<script>
document.getElementById('mySelect').addEventListener('click', function() {
this.size = this.length;
});
</script>
Kod di atas mendengar peristiwa klik
Nota:
Walaupun menggunakan kod JavaScript boleh mengembangkan elemen
- Menggunakan kod JavaScript The
teg perlu ditambah selepas elemen HTML. - Apabila terdapat berbilang
- Apabila menetapkan atribut saiz untuk
Kesimpulan:
Ringkasnya, menggunakan kod JavaScript boleh mengembangkan elemen
Atas ialah kandungan terperinci Bagaimana untuk membuat teg pilih berkembang secara lalai dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!