Artikel ini menjelaskan metode praktis mengklik kotak input untuk memunculkan kotak pemilihan di JS+CSS. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salin kode sebagai berikut: <! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title> JS+CSS Membuat Efek Kotak Pop-Up Kotak Klik Klik Praktis </iteme>
<type style = "text/css">
.black_overlay {display: none; position: absolute; atas: 0%; kiri: 0%; lebar: 100%; tinggi: 100%; latar belakang-warna: #fffff; z-index: 1001; -moz-opacity: 0.8; opacity: .80; filter: alpha (opacity = 80);}
.white_content {display: none; position: absolute; atas: 25%; kiri: 25%; lebar: 50%; tinggi: 50%; padding: 16px; perbatasan: 16px oranye solid; margin: -32px; latar belakang-warna: white; z-index: 1002; fluflow: auto;}
</tyle>
<bahasa skrip = "javascript" type = "text/javascript">
Fungsi Moveselect (obj, target, semua) {
if (! all) all = 0
if (obj! = "[objek]") obj = eval ("document.all."+obj)
target = eval ("document.all."+target)
if (all == 0)
{
while (obj.selectedIndex> -1) {
//alert(obj.selectectedIndex)
mot = obj.options [obj.selectedIndex] .text
mov = obj.options [obj.selectedIndex] .value
Obj.remove (Obj.SelectectedIndex)
var newoption = document.createelement ("opsi");
newoption.text = mot
newoption.value = mov
target.add (newoption)
}
}
kalau tidak
{
//alert(obj.options.length)
untuk (i = 0; i <obj.length; i ++)
{
mot = obj.options [i] .text
mov = obj.options [i] .value
var newoption = document.createelement ("opsi");
newoption.text = mot
newoption.value = mov
target.add (newoption)
}
obj.options.length = 0
}
}
fungsi dakai () {
document.geteLementById ('light'). style.display = 'block';
document.geteLementById ('fade'). style.display = 'block'
}
fungsi guanbi () {
// Lewati nilai pilih di sebelah kanan kotak teks
var yuangong = document.geteLementById ("yuangong")
yuangong.value = "" // Jika kalimat ini tidak ditambahkan, hasil dari setiap seleksi akan ditambahkan.
var huoqu = document.geteLementById ("d2")
untuk (var k = 0; k <huoqu.length; k ++)
yuangong.value = yuangong.value + huoqu.options [k] .value + "" // "" Tengah adalah ruang, pemisah karakter, yang dapat diubah menjadi yang lain
document.geteLementById ('light'). style.display = 'none';
document.geteLementById ('fade'). style.display = 'none'
}
</script>
</head>
<body>
<input type = "text" id = "yuangong" onclick = "dakai ()" size = "50">
<Div id = "Light">
<tabel id = "table4" bordercolor = "#cccccc" bordercolordark = "#cccccc" bordercolorlight = "#fffff" cellpadding = "3" cellpacing = "0">
<tr>
<td align = "center" valign = "middle">
Karyawan di departemen ini
<pilih size = "12" name = "d1" ondBlClick = "Moveselect (this, 'd2')" Multiple = "Multiple">
<Opsi value = "Zhang San"> Zhang San </pection>
<Option value = "Li si"> li si </pection>
<Opsi value = "xiao wang"> xiao wang </pection>
</pilih>
</td>
<td align = "center" valign = "middle">
<input type = "tombol" value = "<<" name = "b3" ontClick = "moveselect ('d2', 'd1', 1)"> <br>
<input type = "Tombol" value = "<" name = "b5" onclick = "moveselect ('d2', 'd1')"> <br>
<input type = "tombol" value = ">" name = "b6" onclick = "moveselect ('d1', 'd2')"> <br>
<input type = "tombol" value = ">>" name = "b4" ontClick = "moveselect ('d1', 'd2', 1)"> <br>
</td>
<td align = "center" valign = "middle">
Karyawan yang menunggu untuk membagi departemen
<Pilih size = "12" name = "d2" id = "d2" ondblClick = "Moveselect (this, 'd1')" Multiple = "Multiple">
<Opsi Value = "Karyawan X"> Karyawan X </potion>
<nilai opsi = "pemberi kerja y"> pemberi kerja y </pection>
</pilih>
</td>
</tr>
</boable>
<a href = "javascript: void (0)" onclick = "guanbi ()"> konfirmasi </a>
<input type = "tombol" name = "Tombol" onclick = "guanbi ()" value = "tombol juga dapat dikonfirmasi">
</div>
<Div id = "fade"> </div>
</body>
</html>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.