บทความนี้อธิบายวิธีการใช้งานจริงของการคลิกที่กล่องอินพุตเพื่อปรากฏขึ้นในกล่องเลือกใน JS+CSS แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังนี้: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> js+css สร้างผลการคลิกกล่องใส่ป๊อปอัพกล่องอินพุตที่ใช้งานได้จริง </title>
<style type = "text/css">
.black_overlay {จอแสดงผล: ไม่มี; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0%; ซ้าย: 0%; ความกว้าง: 100%; ความสูง: 100%; พื้นหลังสี: #fffff; z-index: 1001; -moz-opacity: 0.8;
.white_content {แสดง: ไม่มี; ตำแหน่ง: สัมบูรณ์; ด้านบน: 25%; ซ้าย: 25%; ความกว้าง: 50%; ความสูง: 50%; การตอบสนอง: 16px; ชายแดน: 16px ของแข็งส้ม;
</style>
<script language = "javascript" type = "text/javascript">
ฟังก์ชั่น moveselect (obj, target, all) {
ถ้า (ทั้งหมด) ทั้งหมด = 0
if (obj! = "[object]") obj = eval ("document.all."+obj)
target = eval ("document.all."+เป้าหมาย)
ถ้า (ทั้งหมด == 0)
-
ในขณะที่ (obj.selectedIndex> -1) {
//alert(obj.SelectedIndex)
mot = obj.options [obj.selectedIndex] .Text
mov = obj.options [obj.selectedIndex] .Value
obj.remove (obj.SelectedIndex)
var newOption = document.createElement ("ตัวเลือก");
newOption.text = mot
newOption.value = mov
target.add (Newoption)
-
-
อื่น
-
//alert(obj.options.length)
สำหรับ (i = 0; i <obj.length; i ++)
-
mot = obj.options [i] .Text
mov = obj.options [i] .value
var newOption = document.createElement ("ตัวเลือก");
newOption.text = mot
newOption.value = mov
target.add (Newoption)
-
obj.options.length = 0
-
-
ฟังก์ชั่น dakai () {
document.getElementById ('Light'). style.display = 'block';
document.getElementById ('fade'). style.display = 'block'
-
ฟังก์ชั่น guanbi () {
// ผ่านค่าของเลือกทางด้านขวาไปยังกล่องข้อความ
var yuangong = document.getElementById ("yuangong")
yuangong.value = "" // หากไม่เพิ่มประโยคนี้ผลลัพธ์ของการเลือกแต่ละรายการจะถูกเพิ่ม
var huoqu = document.getElementById ("d2")
สำหรับ (var k = 0; k <huoqu.length; k ++)
yuangong.value = yuangong.value + huoqu.options [k] .value + "" // "" กลางเป็นพื้นที่ตัวแยกอักขระซึ่งสามารถเปลี่ยนเป็นอีกตัวหนึ่ง
document.getElementById ('Light'). style.display = 'none';
document.getElementById ('fade'). style.display = 'none'
-
</script>
</head>
<body>
<อินพุต type = "text" id = "yuangong" onclick = "dakai ()" size = "50">
<div id = "Light">
<table id = "table4" bordercolor = "#cccccc" bordercolordark = "#cccccc" bordercolorlight = "#fffff" cellpadding = "3" cellpacing = "0">
<tr>
<td align = "center" valign = "middle">
พนักงานในแผนกนี้
<select size = "12" name = "d1" ondblclick = "moveselect (this, 'd2')" multiple = "หลาย">
<ตัวเลือกค่า = "จางซาน"> จางซาน </portion>
<ตัวเลือกค่า = "li si"> li si </potion>
<ตัวเลือกค่า = "Xiao Wang"> Xiao Wang </potion>
</เลือก>
</td>
<td align = "center" valign = "middle">
<input type = "button" value = "<<" name = "b3" onclick = "moveselect ('d2', 'd1', 1)"> <br>
<input type = "button" value = "<" name = "b5" onclick = "moveselect ('d2', 'd1')"> <br>
<อินพุต type = "ปุ่ม" value = ">" name = "b6" onclick = "moveselect ('d1', 'd2')"> <br>
<อินพุต type = "ปุ่ม" value = ">>" name = "b4" onclick = "moveselect ('d1', 'd2', 1)"> <br>
</td>
<td align = "center" valign = "middle">
พนักงานที่รอการแบ่งแผนก
<select size = "12" name = "d2" id = "d2" ondblclick = "moveselect (this, 'd1')" multrial = "multiple">>
<ตัวเลือกค่า = "พนักงาน x"> พนักงาน x </portion>
<ตัวเลือกค่า = "นายจ้าง y"> นายจ้าง y </portion>
</เลือก>
</td>
</tr>
</table>
<a href = "JavaScript: void (0)" onclick = "guanbi ()"> ยืนยัน </a>
<อินพุต type = "ปุ่ม" name = "ปุ่ม" onclick = "guanbi ()" value = "ปุ่มสามารถยืนยันได้">>
</div>
<div id = "fade"> </div>
</body>
</html>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน