Home > Developer > JavaScript
Forums are often asked to use CSS to beautify the select tag, in fact, whenever you see the cool is to use JavaScript to achieve. Try to do it yesterday, basically realize the primary function. Take it out and share it with everyone.
First you can look at the preview effect:http://www.iwcn.net/demo/select
Functional Requirements
1, call to be convenient, after doing well should be like this:
function Loadselect (selectobj) {
Passing in a Select object can beautify his style
}
2, do not change the original form items, the form of the page code does not destroy:
<form name= "F" >
<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= "Ten" > Jiangxi </option>
<option value= "One" > Fujian </option>
<option value= "A" > Guangdong </option>
<option value= "" > Zhejiang </option>
</select>
</div>
</fieldset>
<input type= "Submit" value= "submitted" name= "Btnsub"/>
</form>
Realize the idea
This is generally the case, and then we go one step further to achieve it!
Preparatory work
Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "lang=" ZH-CN "> <pead> <meta http-equiv=" Content-type " Content= "text/html; charset=gb2312 "/> <meta http-equiv=" content-language "content=" ZH-CN "/> <title> use JavaScript to beautify select </title> <script type= "Text/javascript" src= "select.js" ></script> <style type= "Text/css" > select{width:200px;height:20px;} </style> </pead> <body> <p> use javascript simulation Select to beautify the effect </p><form name= "F" > < fieldset> <legend> User Registration </legend> <div> <label for= "username" > account </label> <input ty Pe= "text" id= "username" name= "username"/> </div> <div> <label for= "pwd" > Password </label> <i Nput type= "password" name= "pwd" id= "pwd"/> </div> <div> <label for= "province" > Province </label> <select id= "province" Name= "province" > <option value= "ten" > Jiangxi </option> <option value= "one" > Bliss Jian </option> <option value= "A" > Guangdong </option> <option value= "" > Zhejiang </option> </select > </div> </fieldset> <input type= "Submit" value= "submitted" name= "Btnsub"/></form> <script type = "Text/javascript" > Loadselect (document.f.province); </script> <p> <a href= "http://www.iwcn.net" > Author blog </a> </p> </body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Writing JavaScript
<script type= "Text/javascript" src= "Select.js" ></script>
Create a new JS file and save for Select.js, the rest of the work we all in this JS to complete.
Function name: Loadselect (obj);
Parameters: Select Object
related functions :
Take 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
}
}
The first step: Record the absolute position of the Select. A double will come up to know should stand there.
var offset=offset (obj);
This explains that offset is a function to get the absolute position of an object. Written outside the Loadselect () function. He has four attributes, namely, Top/left/width/height.
Step Two: Hide the Select.
Obj.style.display= "None";
Step three: Virtual a div to come out instead of 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 Fourth: Give it a value that the original select has no one to select.
idiv.innerhtml=obj.options[obj.selectedindex].innerhtml;
Step Fifth: Add the mouse over style to the alias.
Idiv.onmouseover=function () {//mouse move to
idiv.style.background= "url (icon_select_focus.gif) no-repeat right 4px";
}
Idiv.onmouseout=function () {//mouse removal
idiv.style.background= "url (icon_select.gif) no-repeat right 4px";
}
Sixth step: Add critical mouse click events.
Idiv.onclick=function () {//mouse click
if (document.getElementById ("Selectchild" + Obj.name)) {
Determine if a DIV has been created
if (childcreate) {
Determine if the current drop is turned on and shut down if it is open. is turned off on the open.
document.getElementById ("Selectchild" + obj.name). style.display= "None";
Childcreate=false;
}else{
document.getElementById ("Selectchild" + obj.name). style.display= "";
Childcreate=true;
}
}else{
The initial div is placed below the previous Div, when the options are double.
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 options from the original select label 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 events to the Li label
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 () {
To do two things, one is to save the user's choice to the original select label, or to do a good job of looking at the form before it can get the value of the select.
obj.options.length=0;
Obj.options[0]=new Option (this.innerhtml,this.id);
At the same time we pull down the drop off.
document.getElementById ("Selectchild" + obj.name). style.display= "None";
Childcreate=false;
idiv.innerhtml=this.innerhtml;
}
}
}
}
Finally, this is a bit more complicated, and again, before we do this, the look of select is out, and the next step is to add a div to imitate the drop-down option that appears after the select is clicked. We can say that the Select tab's options are extracted from 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 some defects, there is time for everyone to add together!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
