The server is mentally retarded, please replace the part of the code containing full-width select with half-width characters.
Program code
<script type="text/javascript">
var childCreate=false;
function Offset(e)
//Get the absolute position of the 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.offsetLeft;
}
return {
top :t,
left: l,
width : w,
height : h
}
}
function loadｓｅｅｃｔ(obj){
//Step one: Get the location of select
var offset=Offset(obj);
//Step 2: Hide the real select
obj.style.display="none";
//Step 3: Create a virtual div to replace select
var iDiv = document.createElement("div");
iDiv.id="ｓｌｅｃｔ" + obj.name;
iDiv.style.position = "absolute";
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.background="url( iDiv.style.border="1px solid #ccc";
iDiv.style.fontSize="12px";
iDiv.style.lineHeight=offset.height + "px";
iDiv.style.textIndent="4px";
document.body.appendChild(iDiv);
//Step 4: Display the default options in select
var tValue=obj.options[obj.selectedIndex].innerHTML;
iDiv.innerHTML=tValue;
//Step 5: Simulate mouse click
iDiv.onmouseover=function(){//mouse moves
iDiv.style.background="url( }
iDiv.onmouseout=function(){//mouse moves away
iDiv.style.background="url( }
iDiv.onclick=function(){//Mouse click
if (document.getElementById("selectchild" + obj.name)){
//Determine whether the div has been created
if (childCreate){
//Determine whether the current drop-down is open. If it is open, close it. If it's closed, open it.
document.getElementById("selectchild" + obj.name).style.display="none";
childCreate=false;
}else{
document.getElementById("selectchild" + obj.name).style.display="";
childCreate=true;
}
}else{
//Initially place a div under the previous div as a substitute for options.
var cDiv = document.createElement("div");
cDiv.id="ｓｏｅｃｔ" + obj.name;
cDiv.style.position = "absolute";
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.background="#f7f7f7";
cDiv.style.border="1px solid silver";
var uUl = document.createElement("ul");
uUl.id="uUlchild" + obj.name;
uUl.style.listStyle="none";
uUl.style.margin="0";
uUl.style.padding="0";
uUl.style.fontSize="12px";
cDiv.appendChild(uUl);
document.body.appendChild(cDiv);
childCreate=true;
for (var i=0;i<obj.options.length;i++){
//Add the options in the original select tag to 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.name).getElementsByTagName("li");
for (var j=0;j<obj.options.length;j++){
//Add mouse event for li tag
liObj[j].onmouseover=function(){
this.style.background="gray";
this.style.color="white";
}
liObj[j].onmouseout=function(){
this.style.background="white";
this.style.color="black";
}
liObj[j].onclick=function(){
//Do two things. One is to save the user's selection to the original select tag. Otherwise, no matter how beautiful the form is, the value of the select will not be obtained after the form is submitted.
obj.options.length=0;
obj.options[0]=new Option(this.innerHTML,this.id);
//At the same time, we close the drop-down.
document.getElementById("selectchild" + obj.name).style.display="none";
childCreate=false;
iDiv.innerHTML=this.innerHTML;
}
}
}
}
}
</script>
<style type="text/css">
ｓｌｅｃｔ{width:200px;height:20px;}
</style>
</head>
<body>
<h1>Use javascript to simulate select to achieve beautification effects</h1>
<form name="f">
<select id="province" name="province">
<option value="10">Jiangxi</option>
<option value="11">Fujian</option>
<option value="12">Guangdong</option>
<option value="13">Zhejiang</option>
<option value="13">Zhejiang</option>
<option value="13">Beijing</option>
<option value="13">Shanghai</option>
<option value="13">Zhejiang</option>
<option value="13">Zhejiang</option>
<option value="13">Zhejiang</option>
<option value="13">Zhejiang</option>
<option value="13">Zhejiang</option>
</select>
</form>
<script type="text/javascript">
loadｓｌｅｃｔ(document.f.province);
</script>