Home > Developer > JavaScript
Div + css simulate select drop-down box, select drop-down box
<! DOCTYPE html>
<Html>
<Head lang = "zh">
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Script src = "lib/jquery-1.11.3.min.js" type = "text/javascript"> </script>
<Style>
. Mod_select ul {margin: 0; padding: 0 ;}
. Mod_select ul: after {
Display: block;
Clear: both;
Visibility: hidden;
Height: 0;
Content :'';
}
. Mod_select ul li {list-style-type: none; float: left; height: 24px ;}
. Select_label {color: # 982F4D; float: left; line-height: 24px; padding-right: 10px; font-size: 12px; font-weight: 700 ;}
. Select_box {float: left; border: solid 1px # ccc; color: #444; position: relative; cursor: pointer; width: 165px; font-size: 12px ;}
. Selet_open {display: inline-block; border-left: solid 1px # ccc; position: absolute; right: 0; top: 0; width: 30px; height: 100%; background: url(xjt.png) no-repeat 10px center ;}
. Select_txt {display: inline-block; padding-left: 10px; width: 135px; line-height: 24px; height: 24px; cursor: text; overflow: hidden ;}
. Option {width: 165px; border: solid 1px # ccc; position: absolute; top: 24px; left:-1px; z-index: 2; overflow: hidden; display: none ;}
. Option a {display: block; height: 26px; line-height: 26px; text-align: left; padding: 0 10px; width: 100%; background: # fff ;}
. Option a: hover {background: # aaa ;}
</Style>
</Head>
<Body>
<Div class = "mod_select">
<Ul>
<Li>
<Span class = "select_label"> sort buy: </span>
<Div class = "select_box">
<Span class = "select_txt"> 1 </span> <a class = "selet_open"> <B> </a>
<Div class = "option">
<A> 1 </a>
<A> 2 </a>
<A> 3 </a>
</Div>
</Div>
</Li>
</Ul>
<Input type = "hidden" id = "select_value"/>
</Div>
<Script>
$ (Function (){
$ (". Select_box"). click (function (event ){
Event. stopPropagation ();
$ (This). find (". option"). toggle ();
$ (This). parent (). siblings (). find (". option"). hide ();
});
$ (Document). click (function (event ){
Var eo1_tables (event.tar get );
If ($ (". select_box"). is (": visible") & eo. attr ("class ")! = "Option "&&! Eo. parent (". option"). length)
$ ('. Option'). hide ();
});
/* Assign a value to the text box */
$ (". Option a"). click (function (){
Var value = $ (this). text ();
$ (This). parent (). siblings (". select_txt"). text (value );
$ ("# Select_value"). val (value)
})
});
</Script>
</Body>
</Html>
Run:
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
