เซิร์ฟเวอร์ปัญญาอ่อน โปรดแทนที่ส่วนของโค้ดที่มีตัวเลือกแบบเต็มความกว้างด้วยอักขระแบบครึ่งความกว้าง
รหัสโปรแกรม
<script type="text/javascript">
var childCreate=false;
ฟังก์ชั่นออฟเซ็ต(e)
// รับตำแหน่งที่แน่นอนของป้ายกำกับ
-
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight-2;
ในขณะที่(e=e.offsetParent)
-
t+=e.offsetTop;
l+=e.offsetซ้าย;
-
กลับ {
ด้านบน :t,
ซ้าย: ล,
ความกว้าง : ก,
ความสูง : ชม
-
-
ฟังก์ชั่นโหลด ｓ ขอบฟ้า อาย ｃ ｔ (obj) {
//ขั้นตอนที่หนึ่ง: รับตำแหน่งที่เลือก
var offset=ออฟเซ็ต(obj);
// ขั้นตอนที่ 2: ซ่อนการเลือกจริง
obj.style.display = "ไม่มี";
//ขั้นตอนที่ 3: สร้าง div เสมือนเพื่อแทนที่การเลือก
var iDiv = document.createElement("div");
iDiv.id="ｓｌּｃｔ" + obj.name;
iDiv.style.position = "สัมบูรณ์";
iDiv.style.width=offset.width + "px";
iDiv.style.height=offset.height + "px";
iDiv.style.top=offset.top + "px";
iDiv.style.left=offset.left + "px";
iDiv.style.พื้นหลัง = "url ( iDiv.style.border = "1px ทึบ #ccc";
iDiv.style.fontSize="12px";
iDiv.style.lineHeight=offset.height + "px";
iDiv.style.textIndent="4px";
document.body.appendChild(iDiv);
//ขั้นตอนที่ 4: แสดงตัวเลือกเริ่มต้นในการเลือก
var tValue=obj.options[obj.selectedIndex].innerHTML;
iDiv.innerHTML=tValue;
// ขั้นตอนที่ 5: จำลองการคลิกเมาส์
iDiv.onmouseover=function(){//การเคลื่อนไหวของเมาส์
iDiv.style.พื้นหลัง = "url ( }
iDiv.onmouseout=function(){//mouse เคลื่อนออกไป
iDiv.style.พื้นหลัง = "url ( }
iDiv.onclick=function(){//คลิกเมาส์
ถ้า (document.getElementById("selectchild" + obj.name)){
//ตรวจสอบว่า div ถูกสร้างขึ้นหรือไม่
ถ้า (childCreate){
//ตรวจสอบว่าเมนูแบบเลื่อนลงปัจจุบันเปิดอยู่หรือไม่ หากเปิดอยู่ ให้ปิด ถ้าปิดก็เปิดเลย
document.getElementById("selectchild" + obj.name).style.display="none";
เด็กสร้าง = false;
}อื่น{
document.getElementById("selectchild" + obj.name).style.display="";
เด็กสร้าง=จริง;
-
}อื่น{
//เริ่มแรกให้วาง div ไว้ใต้ div ก่อนหน้าเพื่อทดแทนตัวเลือก
var cDiv = document.createElement("div");
cDiv.id="ｓｏּｃｔ" + obj.name;
cDiv.style.position = "สัมบูรณ์";
cDiv.style.width=offset.width + "px";
cDiv.style.height=obj.options.length *20 + "px";
cDiv.style.top=(offset.top+offset.height+2) + "px";
cDiv.style.left=offset.left + "px";
cDiv.style.พื้นหลัง="#f7f7f7";
cDiv.style.border="1px สีเงินทึบ";
var uUl = document.createElement("ul");
uUl.id="uUlchild" + obj.name;
uUl.style.listStyle="ไม่มี";
uUl.style.margin="0";
uUl.style.padding="0";
uUl.style.fontSize="12px";
cDiv.appendChild(uUl);
document.body.appendChild(cDiv);
เด็กสร้าง=จริง;
สำหรับ (var i=0;i<obj.options.length;i++){
//เพิ่มตัวเลือกในแท็ก select ดั้งเดิมไปที่ 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.ผนวกเด็ก(lLi);
-
var liObj=document.getElementById("uUlchild" + obj.name).getElementsByTagName("li");
สำหรับ (var j=0;j<obj.options.length;j++){
//เพิ่มเหตุการณ์เมาส์สำหรับแท็ก li
liObj[j].onmouseover=function(){
นี้.style.พื้นหลัง = "สีเทา";
this.style.color="สีขาว";
-
liObj[j].onmouseout=function(){
นี้.style.พื้นหลัง = "สีขาว";
this.style.color="สีดำ";
-
liObj[j].onclick=function(){
//ทำสองสิ่ง อย่างแรกคือบันทึกการเลือกของผู้ใช้ลงในแท็กการเลือกดั้งเดิม มิฉะนั้น ไม่ว่าแบบฟอร์มจะสวยงามแค่ไหน ก็จะไม่ได้รับค่าของการเลือกหลังจากส่งแบบฟอร์มแล้ว
obj.options.ความยาว=0;
obj.options[0]=ตัวเลือกใหม่(this.innerHTML,this.id);
//ในขณะเดียวกัน เราก็ปิดเมนูแบบเลื่อนลง
document.getElementById("selectchild" + obj.name).style.display="none";
เด็กสร้าง = false;
iDiv.innerHTML=this.innerHTML;
-
-
-
-
-
</สคริปต์>
<style type="text/css">
```{width:200px;height:20px;}
</สไตล์>
</หัว>
<ร่างกาย>
<h1>ใช้จาวาสคริปต์เพื่อจำลองการเลือกเพื่อให้ได้เอฟเฟกต์การตกแต่ง</h1>
<ชื่อแบบฟอร์ม = "ฉ">
<select id="จังหวัด" name="จังหวัด">
<option value="10">เจียงซี</option>
<option value="11">ฝูเจี้ยน</option>
<option value="12">กวางตุ้ง</option>
<option value="13">เจ้อเจียง</option>
<option value="13">เจ้อเจียง</option>
<option value="13">ปักกิ่ง</option>
<option value="13">เซี่ยงไฮ้</option>
<option value="13">เจ้อเจียง</option>
<option value="13">เจ้อเจียง</option>
<option value="13">เจ้อเจียง</option>
<option value="13">เจ้อเจียง</option>
<option value="13">เจ้อเจียง</option>
</เลือก>
</แบบฟอร์ม>
<script type="text/javascript">
โหลดｓｌּｃｔ(document.f.จังหวัด);
</สคริปต์>