A lot of people asked about the dropdown box landscaping problem, now play a drop-down frame landscaping production process, is actually a simulation of the Drop-down box.
Question 1: Why do you want to simulate a drop-down box?
1, the browser with the dropdown box style is not good-looking.
2, under IE6, the dropdown box has precedence over the layer, often causing the Drop-down box to appear above the layer.
OK, after we understand this problem, we start using jquery to make the mock down box.
The first step: build a good structure first
This is the normal dropdown box code:
xml/html Code
Copy Code code as follows:
<select name= "abc" id= "abc" >
<option value= "1" > Option one </option>
<option value= "2" > Option two </option>
<option value= "3" > option three </option>
<option value= "4" > option four </option>
<option value= "5" > option five </option>
<option value= "6" > option six </option>
</select>
This is a mock up:
xml/html Code
Copy Code code as follows:
<div class= "Crselectbox" >
<input type= "hidden" value= "" Name= "abc" id= "abc"/> <!--hidden used to replace the value of select-->
<input type= "hidden" value= "name=" Abc_crtext "id=" Abc_crtext "/> <!--hidden used to replace select text-->
<a class= "Crselectvalue" href= "#" > Option one </a>
<ul class= "Crselectboxoptions" >
<li class= "Crselectboxitem" ><a href= "#" class= "selected" rel= "1" > Option one </a></li>
<li class= "Crselectboxitem" ><a href= "#" rel= "2" > Option two </a></li>
<li class= "Crselectboxitem" ><a href= "#" rel= "3" > option three </a></li>
<li class= "Crselectboxitem" ><a href= "#" rel= "4" > option four </a></li>
<li class= "Crselectboxitem" ><a href= "#" rel= "5" > option five </a></li>
<li class= "Crselectboxitem" ><a href= "#" rel= "6" > option six </a></li>
</ul>
</div>
<! 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 "> <pead> <title></title> <meta http-equiv = "Content-type" content= "text/html"; charset=gb2312 "/> <link rel= stylesheet" href= "Css/crselectbox.css" type= "Text/css"/> </pead> < Body > <p>1, first build the structure </p> <select name= "abc" id= "abc" > <option value= "1" > Option one </OPTION&G T <option value= "2" > Option two </option> <option value= "3" > option three </option> <option value= "4" > option Four </option> <option value= "5" > option five </option> <option value= "6" > option six </option> </sel ect> VS <div class= "Crselectbox" > <input type= "hidden" value= "" Name= "abc" id= "abc"/> <!--hi Dden is used to replace the value of select--> <input type= "hidden" value= "name=" Abc_crtext "id=" Abc_crtext "/> <!--Hidden is used to replace select text--> option one <ul class= "crselectboxoptions" > <li class= "Crselectboxitem" & gt; option one </li> <li class= "crselectboxitem" > Option two </li> <li class= "crselectboxitem" > option three </li> <li class= "Crselectboxitem" > option four </li> <li class= "crselectboxitem" > option five </l i> <li class= "Crselectboxitem" > option six </li> </ul> </div> </body> </HTML&G T
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Step Two: Build the effect
The main thing is the jquery code:
JavaScript code
Copy Code code as follows:
$ (function () {
$(". Crselectbox "). Hover (function () {
$ (this). addclass ("Crselectboxhover");
},function () {
$ (this). Removeclass ("Crselectboxhover");
});
$(". Crselectvalue "). Click (function () {
$ (this). blur ();
$(". Crselectboxoptions "). Show ();
return false;
});
$(". Crselectboxitem a "). Click (function () {
$ (this). blur ();
var value = $ (this). attr ("rel");
var txt = $ (this). text ();
$ ("#abc"). val (value);
$ ("#abc_CRtext"). Val (TXT);
$(". Crselectvalue "). Text (TXT);
$(". Crselectboxitem a "). Removeclass (" selected ");
$ (this). AddClass ("selected");
$(". Crselectboxoptions "). Hide ();
return false;
});
/* Click on any place to close the layer * *
$ (document). Click (Function (event) {
if ($ (event.target). attr ("class")!= "Crselectbox") {
$(". Crselectboxoptions "). Hide ();
}
});
/*===================test========================*/
$ ("#test"). Click (function () {
var value = $ ("#abc"). Val ();
var txt = $ ("#abc_CRtext"). Val ();
Alert ("You select the value and text is:" + value + "," +txt);
});
})
<! 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 "> <pead> <title></title> <meta http-equiv = "Content-type" content= "text/html"; charset=gb2312 "/> <link rel=" stylesheet "href=" Css/crselectbox.css "type=" Text/css "/> <script src=" http ://img.jb51.net/jslib/jquery/jquery-1.3.2.js "type=" Text/javascript "></script> <script type=" text/ JavaScript "> $ (Function () {$ (). Crselectbox "). Hover (function () {$ (this). addclass (" Crselectboxhover "); },function () {$ (this). Removeclass ("Crselectboxhover"); }); $(". Crselectvalue "). Click (function () {$ (this). blur (); $(". Crselectboxoptions "). Show (); return false; }); $(". Crselectboxitem a "). Click (function () {$ (this). blur (); var value = $ (this). attr ("rel"); var txt = $ (this). text (); $ ("#abc"). val (value); $ ("#abc_CRtext"). Val (TXT); $(". Crselectvalue "). Text (TXT); $(". Crselectboxitem a "). Removeclass (" selected "); $ (this). AddClass ("selected"); $(". Crselectboxoptions "). Hide (); return false; }); /* Click anywhere to close the layer * * (document). Click (Function (event) {if ($ (event.target). attr ("class")!= "Crselectbox") { $(". Crselectboxoptions "). Hide (); } }); /*===================test========================*/$ ("#test"). Click (function () {var value = $ ("#abc"). Val () ; var txt = $ ("#abc_CRtext"). Val (); Alert ("You select the value and text is:" + value + "," +txt); }); }) </script> </pead> <body > <p>2, Build effect (need to refresh to see effect) </p> <div class= "Crselectbox" & Gt <input type= "Hidden" value= "1" name= "abc" id= "abc"/><!--hidden to replace the value of select--> <input type= "hidden" value= "option One" Name= "Abc_crtext" id= "Abc_crtext"/&Gt <!--hidden is used to replace select text--> option one <ul class= "crselectboxoptions" > <li class= "Crselectboxi" TEM > Options One </li> <li class= "crselectboxitem" > Option two </li> <li class= "Crselectboxitem" &G t; option three </li> <li class= "Crselectboxitem" > option four </li> <li class= "Crselectboxitem" > Options Five & lt;/li> <li class= "Crselectboxitem" > option six </li> </ul> </div> <input type= "bu Tton "id=" test "value=" outputs selected values and text content "/> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Actually, it's finished here. For convenience, make plug-ins.
Http://demo.jb51.net/js/JQuery_select/demo3.html
Full instance package download
