Persyaratan fungsional
1. Panggilan harus nyaman. Setelah selesai, akan terlihat seperti ini:
function loadSelect(selectobj){
//Memasukkan objek yang dipilih untuk mempercantik gayanya
}
2. Jangan mengubah item formulir asli, dan jangan merusak kode halaman formulir:
<form name="f" onsubmit="getResult();">
<kumpulan bidang>
<legend>Pendaftaran pengguna</legend>
<div>
<label for="nama pengguna">Akun</label>
<input type="teks" id="nama pengguna" nama="nama pengguna" />
</div>
<div>
<label for="pwd">Sandi</label>
<masukan tipe='kata sandi' nama='pwd' id='pwd' />
</div>
<div>
<label for="province">Provinsi</label>
<pilih id="provinsi" nama="provinsi">
<option value="10">Jiangxi</option>
<option value="11">Fujian</option>
<option value="12">Guangdong</option>
<option value="13">Zhejiang</option>
</pilih>
</div>
</set bidang>
<input type="kirim" value="Kirim" nama="btnSub" />
</bentuk>
untuk mengimplementasikan ide tersebut
: sembunyikan pilihan di formulir.
Mengapa? Sederhana saja, karena orang ini terlalu keras kepala dan tidak bisa mendapatkan apa yang diinginkannya dengan menggunakan CSS. Jadi bunuh saja.
Langkah 2: Gunakan skrip untuk menemukan posisi absolut dari tag pilihan di halaman web.
Kami menggunakan tag DIV untuk membuat tag palsu dan terlihat lebih bagus pada posisi tersebut untuk dijadikan penggantinya.
Langkah 3: Gunakan skrip untuk membaca nilai di tag pilih.
Meski tersembunyi, kita tetap bisa menggunakan opsi-opsi yang ada di dalamnya, sehingga bisa kita ambil semuanya.
Langkah 4: Saat pengguna mengklik avatar dari tag pilih, yaitu div. Kami menggunakan div lain untuk mengapung di bawah div sebelumnya. Ini adalah pilihan pengganti.
Kurang lebih seperti itu, mari kita terapkan langkah demi langkah!
Persiapan
1. Pikirkan bagaimana Anda ingin mempercantik pilihan dan menyiapkan gambar yang sesuai. Saya menyiapkan dua gambar kecil, yaitu panah drop-down 1 dan panah drop-down 2. 1 adalah gaya default dan 2 adalah gaya ketika mouse digerakkan.
2. Tulis halaman pengiriman formulir yang umum, seperti di bawah ini. Perhatikan bahwa saya mendefinisikan gaya CSS dasar untuk pemilihan, menambahkan kode untuk memanggil file js di kepala, dan menambahkan skrip untuk memanggil fungsi di badan.
Tulis javascript
<script type="text/javascript" src="select.js"></script>
Buat file js baru dan simpan sebagai select.js. Kami akan menyelesaikan sisa pekerjaan di js ini.
Nama fungsi: loadSelect(obj);
Parameter: Pilih
fungsi terkait objek:
//Dapatkan posisi absolut label
{
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight-2;
while(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetKiri;
}
kembali {
atas :t,
kiri: aku,
lebar : w,
tinggi : h
}
}
Langkah pertama: Catat posisi absolut yang dipilih. Setelah beberapa saat, pemain pengganti muncul dan saya tahu di mana saya harus berdiri.
var offset=Offset(obj);
//Jelaskan di sini bahwa Offset adalah fungsi yang digunakan untuk mendapatkan posisi absolut suatu objek. Ditulis di luar fungsi loadSelect(). Ini memiliki empat atribut: atas/kiri/lebar/tinggi.
Langkah 2: Sembunyikan pilihan.
obj.style.display="tidak ada";
Langkah 3: Gunakan div virtual untuk menggantikan select
var iDiv = document.createElement("div");
iDiv.id="pilih" + objek.nama;
iDiv.style.position = "mutlak";
iDiv.style.width=offset.lebar + "px";
iDiv.style.height=offset.height + "px";
iDiv.style.top=offset.top + "px";
iDiv.style.left=offset.kiri + "px";
iDiv.style.background="url(icon_select.gif) no-repeat right 4px";
iDiv.style.border="1 piksel padat #3366ff";
iDiv.style.fontSize="12px";
iDiv.style.lineHeight=offset.tinggi + "px";
iDiv.style.textIndent="4px";
dokumen.body.appendChild(iDiv);
Langkah 4: Berikan nilai yang tidak dipilih dari pilihan asli.
iDiv.innerHTML=obj.options[obj.selectedIndex].innerHTML;
Langkah 5: Tambahkan gaya mouseover ke avatar.
iDiv.onmouseover=function(){//gerakan mouse
iDiv.style.background="url(icon_select_focus.gif) tanpa ulangi kanan 4px";
}
iDiv.onmouseout=function(){//mouse menjauh
iDiv.style.background="url(icon_select.gif) no-repeat right 4px";
}
Langkah 6: Tambahkan peristiwa klik mouse utama.
iDiv.onclick=function(){//Klik mouse
if (document.getElementById("selectchild" + obj.name)){
//Tentukan apakah div telah dibuat
jika (buatan anak){
//Tentukan apakah drop-down saat ini terbuka. Jika terbuka, tutup. Jika tertutup, bukalah.
document.getElementById("selectchild"+ obj.name).style.display="none";
anakBuat=salah;
}kalau tidak{
document.getElementById("selectchild" + obj.name).style.display="";
anakBuat=benar;
}
}kalau tidak{
//Awalnya letakkan div di bawah div sebelumnya sebagai pengganti opsi.
var cDiv = dokumen.createElement("div");
cDiv.id="pilihanak" + obj.nama;
cDiv.style.position = "mutlak";
cDiv.style.width=offset.lebar + "px";
cDiv.style.height=obj.options.length *20 + "px";
cDiv.style.top=(offset.top+offset.height+2) + "px";
cDiv.style.left=offset.kiri + "px";
cDiv.style.background="#f7f7f7";
cDiv.style.border="1 piksel perak solid";
var uUl = dokumen.createElement("ul");
uUl.id="uUlchild" + objek.nama;
uUl.style.listStyle="tidak ada";
uUl.style.margin="0";
uUl.gaya.padding="0";
uUl.style.fontSize="12px";
cDiv.appendChild(uUl);
dokumen.body.appendChild(cDiv);
anakBuat=benar;
untuk (var i=0;i<obj.options.length;i++){
//Tambahkan opsi di tag pilih asli ke li
var lLi=document.createElement("li");
lLi.id=obj.options[i].value;
lLi.style.textIndent="4px";
lLi.style.height="20px";
lLi.style.lineHeight="20px";
lLi.innerHTML=obj.options[i].innerHTML;
uUl.appendChild(lLi);
}
var liObj=document.getElementById("uUlchild" + obj.nama).getElementsByTagName("li");
untuk (var j=0;j<obj.options.length;j++){
//Tambahkan event mouse untuk tag li
liObj[j].onmouseover=fungsi(){
this.style.background="abu-abu";
ini.gaya.warna="putih";
}
liObj[j].onmouseout=fungsi(){
ini.gaya.latar belakang="putih";
ini.gaya.warna="hitam";
}
liObj[j].onclick=fungsi(){
//Lakukan dua hal. Pertama adalah menyimpan pilihan pengguna ke tag pilihan asli. Jika tidak, betapapun indahnya, nilai pilihan tidak akan diperoleh setelah formulir dikirimkan.
obj.options.length=0;
obj.options[0]=Opsi baru(ini.innerHTML,ini.id);
//Pada saat yang sama, kita menutup drop-down.
document.getElementById("selectchild" + obj.name).style.display="none";
anakBuat=salah;
iDiv.innerHTML=ini.innerHTML;
}
}
}
}
Yang terakhir sedikit lebih rumit, izinkan saya menjelaskannya lagi. Sebelum kita melakukan langkah ini, tampilan pilih sudah terungkap. Langkah selanjutnya adalah menambahkan div untuk meniru opsi drop-down yang muncul setelah pilih diklik. Kita dapat mengekstrak opsi tag pilih melalui javascript dan menulisnya seperti ini:
<div>
<ul>
<li>NamaPilihan</li>
<li>NamaPilihan</li>
<li>NamaPilihan</li>
</ul>
</div>
Pada dasarnya itu saja. Masih ada beberapa kekurangan. Jika Anda punya waktu, Anda bisa menambahkannya bersama-sama!