Functional requirements
1. The call should be convenient. After it is done, it should look like this:
function loadSelect(selectobj){
//Pass in a select object to beautify its style
}
2. Do not change the original form items, and do not destroy the form page code:
<form name="f" onsubmit="getResult();">
<fieldset>
<legend>User registration</legend>
<div>
<label for="username">Account</label>
<input type="text" id="username" name="username" />
</div>
<div>
<label for="pwd">Password</label>
<input type="password" name="pwd" id="pwd" />
</div>
<div>
<label for="province">Province</label>
<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>
</select>
</div>
</fieldset>
<input type="submit" value="Submit" name="btnSub" />
</form>
to implement the idea
: hide the select in the form.
Why? It's simple, because this guy is too stubborn and can't get what you want using CSS. So kill it.
Step 2: Use a script to find the absolute position of the select tag on the web page.
We use DIV tags to make a fake and better-looking one at that position to serve as his stand-in.
Step 3: Use a script to read the value in the select tag.
Although it is hidden, we can still use the options in it, so we can take them all.
Step 4: When the user clicks on the avatar of the select tag, which is the div. We use another div to float below the previous div. This is the stand-in for options.
That's roughly it, let's implement it step by step!
Preparation
1. Think about how you want to beautify the selection and prepare the corresponding pictures. I prepared two small pictures, which are drop-down arrow 1 and drop-down arrow 2. 1 is the default style and 2 is the style when the mouse is moved over.
2. Write a common form submission page, such as the one below. Note that I defined the basic CSS style for the select, added the code to call the js file in the head, and added the script to call the function in the body.
Write javascript
<script type="text/javascript" src="select.js"></script>
Create a new js file and save it as select.js. We will complete the rest of the work in this js.
Function name: loadSelect(obj);
Parameters: Select object
related functions:
//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
}
}
Step one: Record the absolute position of the select. After a while, the substitute came up and I knew where I should stand.
var offset=Offset(obj);
//Explain here that Offset is a function used to obtain the absolute position of an object. Written outside the loadSelect() function. It has four attributes: top/left/width/height.
Step 2: Hide the selection.
obj.style.display="none";
Step 3: Use a virtual div to replace select
var iDiv = document.createElement("div");
iDiv.id="selectof" + 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(icon_select.gif) no-repeat right 4px";
iDiv.style.border="1px solid #3366ff";
iDiv.style.fontSize="12px";
iDiv.style.lineHeight=offset.height + "px";
iDiv.style.textIndent="4px";
document.body.appendChild(iDiv);
Step 4: Give it the unselected value of the original select.
iDiv.innerHTML=obj.options[obj.selectedIndex].innerHTML;
Step 5: Add a mouseover style to the avatar.
iDiv.onmouseover=function(){//mouse moves
iDiv.style.background="url(icon_select_focus.gif) no-repeat right 4px";
}
iDiv.onmouseout=function(){//mouse moves away
iDiv.style.background="url(icon_select.gif) no-repeat right 4px";
}
Step 6: Add key mouse click events.
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="selectchild" + 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 it 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;
}
}
}
}
The last one is a little more complicated. Let me explain again. Before we do this step, the appearance of the select has already been revealed. The next step is to add a div to imitate the drop-down option that appears after the select is clicked. We can extract the options of the select tag through javascript and write it like this:
<div>
<ul>
<li>optionName</li>
<li>optionName</li>
<li>optionName</li>
</ul>
</div>
That's basically it. There are still some flaws. If you have time, you can add them together!