下拉列表(练习)

Posted 非凡。

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了下拉列表(练习)相关的知识,希望对你有一定的参考价值。


<style>
ul{
    padding: 0;margin:0;list-style: none;
}
.item{
         border:1px solid #ccc;
         width:100px;
        height: 30px;
}
.item span{
                float:left;
                width:80px;
                height: 30px;
                line-height: 30px;
                text-align: center;
}
.item span:nth-child(2){
                                  width:0;
                                  height:0;
                                  border:5px solid transparent;
                                  border-top-color:#000;
                                  margin-top: 10px;
                                  margin-left:5px;
}
.list{
       clear:both;
       display: none;
       border:1px solid #ccc;
       width: 100px;
}
.list li:hover{
                  background: #ccc;
}

</style>

<div id="item" class="item"><span class="content">北京</span><span></span></div>
<ul id="list" class="list">
    <li>北京</li>
    <li>上海</li>
    <li>武汉</li>
    <li>长沙</li>
    <li>深圳</li>
</ul>

 


<script>
function $(id){
    return document.getElementById(id);
}

function preventBubble(ev){ //阻止冒泡
    var e=event||ev;
    if(e.stopPropagation){
        e.stopPropagation();
    }
    else{
        window.event.cancelBubble=true;
    }
}
var item = $("item");
var list = $(‘list‘);
var lis = list.getElementsByTagName("li");
var spans= item.getElementsByTagName("span");

spans[1].onclick=function(ev){//点击三角形显示所有目标项
    list.style.display="block";
    preventBubble(ev); //调用阻止冒泡
}
for(var i=0;i<lis.length;i++){ //点击目标被选中状态,
    lis[i].onclick=function(){
        spans[0].innerhtml=this.innerHTML;
        list.style.display="none";//其他的项隐藏
    }
}
document.onclick=function(){ //点击空白地方目标项隐藏
    list.style.display="none";
}
</script>

以上是关于下拉列表(练习)的主要内容,如果未能解决你的问题,请参考以下文章

ajax中网页传输XML——下拉列表显示练习

购物地址选择下拉列表练习

一个简单的输入框移入后显示下拉列表

JQuery+Ajax实战三级下拉列表联动

PHP——explode的应用(获取字符串,拆为下拉列表)

下拉列表内容怎么设置?