张胤博客 我的网络家园!

自定义下拉框js

我们来做一个自定义效果的选择框,效果如下图;

css布局布局略过,代码下面会奉上,咱们主要写一些js的思路:

  1. 我们点击下拉按钮的时候,下拉框显示出来(不点击时时隐藏的);我们再点击时下拉框会隐藏,这说明这里应该用个判断。

  2. 我们点击下拉框的单个内容时,下拉框的内容会出现在上面的搜索框中,只是在搜索框中一个左浮动,一个右浮动。同事下拉框这个模块会隐藏。

    下面是我根据这个思路写出来的:

布局代码:

<div class="box">

<p class="p1">快速搜索消费贷款</p>

    <div class="box2" id="box">

    <div class="clearfix box11">

        <p class="fl">贷款金额</p>

            <p class="fr">不足一万按一万计算</p>

        </div>

        <div class="box12 clearfix" >

            <p class="box121 fl">

                 <input class="inp2"   value="30" />

                 <b class="inp3" >万元</b>

            </p>

             <p class="fr p2" ></p>

             <ul id="ul1" >

             <li><i>5</i><b>万元</b></li>

                <li><i>10</i><b>万元</b></li>

                <li><i>15</i><b>万元</b></li>

                <li><i>20</i><b>万元</b></li>

                <li><i>25</i><b>万元</b></li>

                <li><i>30</i><b>万元</b></li>

             </ul>

        </div>

    </div>

    

    <div class="box2" id="box9">

    <div class="clearfix box11">

        <p class="fl">贷款金额</p>

            <p class="fr">不足一万按一万计算</p>

        </div>

        <div class="box12 clearfix" >

            <p class="box121 fl">

                 <input class="inp2"   value="6" />

                 <b class="inp3" >个月</b>

            </p>

             <p class="fr p2" ></p>

             <ul id="ul2" >

             <li><i>6</i><b>个月</b></li>

                <li><i>1</i><b>年</b></li>

                <li><i>18</i><b>个月</b></li>

                <li><i>2</i><b>年</b></li>

                <li><i>3</i><b>年</b></li>

                <li><i>5</i><b>年</b></li>

             </ul>

           

        </div>

    </div>


    <input class="inp1" type="button" value="搜索一下" />

    <p class="p3">在比较的时候,也可以把字符串转换成数字</p>

</div>

css样式代码如下:

*{

margin:0;

padding:0;

font-size:12px;

font-family:"微软雅黑";

color:#2b2b2b;

line-height:100%;

}

a{

text-decoration:none;

color:#2b2b2b;

font-size:12px;

}

em, i{

font-style:normal;

}

strong, b{

font-weight:normal;

}

ul, ol, dl{

list-style:none;

}

img{

display:block;

}

textarea, select, input{

outline:none;

}

textarea{

resize:none;

}

h1, h2, h3, h4, h5, h6{

font-weight:normal;

}

.clearfix:after{

display:block;

content:"";

clear:both;

}

.clearfix{

zoom:1;

}

.inner{

width:1349px;

margin:0 auto;

}


.fl{

float:left;

}

.fr{

float:right;

}

.box{

width:285px;

height:372px;

background:#525a5a;

padding:30px 20px 0;

margin:50px auto;

}

p{

color:#fff;

}

.box11{

margin-bottom:7px;}

.p1{

font-size:25px;

color:#fff;

font-weight:bold;

margin-bottom:20px;

}

.box12{

width:285px;

height:40px;

border:1px solid #9c9494;

background:#FFF;

position:relative;

}

.box12 p{

line-height:40px;

color:#333;

}

.box12 .p2{

width:45px;

height:40px;

background:url(../img/1.jpg) no-repeat center;

border-left:1px solid #9c9494;

}

.box121{

width:218px;

padding:0 10px;}

.box2{

margin-bottom:15px;

}

.box3{

margin-bottom:25px;

}

.inp1{

border:1px solid #00427b;

width:285px;

height:40px;

background:#0094ef;

line-height:40px;

text-align:center;

color:#fff;

margin-bottom:21px;

}

ul{

width:285px;

background:#fff;

border:1px solid #9c9494;

border-top:none;

position:absolute;

left:-1px;

top:41px;

z-index:1;

display:none;

}

li{

padding-left:15px;

line-height:25px;

cursor:pointer;

}

.p3{

color:#9c9494;

font-size:12px;

text-align:center;

}

.show ul{

display:block;

}


.show .box12 .p2{

width:45px;

height:40px;

background:url(../img/2.jpg) no-repeat center;

border-left:1px solid #9c9494;

}

input{

border:none;

color:#333;

line-height:40px;

}

i{

line-height:40px;

}

.inp3{

width:40px;

text-align:right;

line-height:40px;

}

.box121 input{

float:left;

}

.box121 b{

float:right;

line-height:40px;

}

box121 i{

float:left;

}

js的代码如下:

function show(id,b){

var oBox=document.getElementById(id);

var oUl=document.getElementById(b);

var aLi=oUl.getElementsByTagName('li');

var oP1=oBox.getElementsByTagName('p')[2];

var oP2=oBox.getElementsByTagName('p')[3];

    oP2.onclick=function(){

if(oBox.className=='show'){

oBox.className='box2';

}else{

oBox.className='show';

}

};

for(i=0;i<aLi.length;i++){

aLi[i].onclick=function (){

oP1.innerHTML=this.innerHTML;

oBox.className='box2';

}

aLi[i].onmouseover=function (){

for(i=0;i<aLi.length;i++){

aLi[i].style.background='#fff';

}

this.style.background='#ccc';

}

}

};

window.onload=function (){


show('box','ul1');

show('box9','ul2');

};


Tags:

发布: 阿狸小娜 分类: WEB前端 评论: 0 浏览: 79
留言列表
发表留言
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。