A drop-down box with check boxes implemented by js + csss, jscsss

A drop-down box with check boxes implemented by js + csss, jscsss

:

Css:

<Style type = "text/css">/* drop-down box with check boxes */ul li {list-style: none; padding: 0px; margin: 0px ;}. select_checkBox {border: 0px solid red; position: relative; display: inline-block ;}. chartQuota {height: 23px; float: left; display: inline-block; border: 0px solid black; position: relative ;}. chartOptionsFlowTrend {z-index: 300; background-color: white; border: 1px solid gray; display: none; position: absolute; left: 0px; top: 23px; width: 150px ;}. chartOptionsFlowTrend ul {float: left; padding: 0px; margin: 5px ;}. chartOptionsFlowTrend li {/* float: left; */display: block; position: relative; left: 0px; margin: 0px; clear: both ;}. chartOptionsFlowTrend li * {float: left;} a:-webkit-any-link {color:-webkit-link; text-decoration: underline; cursor: auto ;}. chartQuota p a {float: left; height: 21px; outline: 0 none; border: 1px solid # ccc; line-height: 22px; padding: 0 5px; overflow: hidden; background: # eaeaea; color: #313131; text-decoration: none ;}. chartQuota p {margin: 0px; folat: left; overflow: hidden; height: 23px; line-height: 24px; display: inline-block ;}. chartOptionsFlowTrend p {height: 23px; line-height: 23px; overflow: hidden; position: relative; z-index: 2; background: # fefbf7; padding-top: 0px; display: inline-block ;}. chartOptionsFlowTrend p a {border: 1px solid # fff; margin-left: 15px; color: # 2e91da ;}</style>

Html:

<Div class = "select_checkBox"> <div class = "chartQuota"> <p> <a href = "javascript :; "hidefocus =" true "title =" Please select metrics "> <span> select metrics </span> <B> </a> </p> </ div> <br> <div class = "chartOptionsFlowTrend" "> <ul> <li class =" "> <input type =" checkbox "value =" 1 "> <span> views (PV) </span> </li> <li class = ""> <input type = "checkbox" value = "1"> <span> unique visitor (UV) </span> </li> <li class = ""> <input type = "checkbox" value = "1"> <span> IP </span> </li> <li class = ""> <input type = "checkbox" value = "1"> <span> New Independent Visitor </span> </li> <li class = ""> <input type = "checkbox" value = "1"> <span> Number of visits </span> </li> </ul> <p> <a href = "javascript :; "title =" OK "hidefocus =" true "class =" a_0 "> OK </a> <a href =" javascript :; "title =" cancel "hidefocus =" true "class =" a_1 "> cancel </a> </p> </div>

Js:

<script type="text/javascript"> $(function(){ $(".select_checkBox").hover(function(){ $(".chartOptionsFlowTrend").css("display","inline-block"); },function(){ $(".chartOptionsFlowTrend").css("display","none"); }); }); </script>

Check box for js drop-down box Control

This problem is simple and difficult to say. If hibernate is used for custom binding, the drop-down box is defined by value. The present value of value is the value you have selected and the value is directly used.

A javascript drop-down box linked check box Program

Here is a multi-level association select Effect
Refer
Reference: www.blueidea.com/..20.000085