div做下拉列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px auto; padding:0px;}
#sel{ width:280px; height:40px; border:1px solid #C0F;
margin-top:100px; line-height:40px; vertical-align:middle; padding-left:20px;}
#list{ width:300px; height:200px; border-left:1px solid#c0f; border-right:1px solid#c0f;
}
.item{ width:280px; height:39px; border-bottom:1px solid#c0f; line-height:40px; vertical-align:middle; padding-left:20px;}
</style>
</head>

<body>

<div id="sel"></div>
<div id="list" style="display:none">
<div class="item" onmouseover="xz(this)" onclick="xuanzhong(this)">北京</div>
<div class="item" onmouseover="xz(this)" onclick="xuanzhong(this)">上海</div>
<div class="item" onmouseover="xz(this)" onclick="xuanzhong(this)">南京</div>
<div class="item" onmouseover="xz(this)" onclick="xuanzhong(this)">重庆</div>
<div class="item" onmouseover="xz(this)" onclick="xuanzhong(this)">深圳</div>
</div>

<!--<select>
<option>11</option>
<option>22</option>
<option>33</option>
</select>-->

</body>
<script type="text/javascript">

function xz(a){
//所有的还原
var sy =document.getElementsByClassName("item");
for(var i=0;i<sy.length;i++){
sy[i].style.backgroundColor="white";
sy[i].style.color = "black";
}
//当前的选中
a.style.backgroundColor="blue";
a.style.color = "white";
}

var sel = document.getElementById("sel");
sel.onclick = function(){

var c = document.getElementById("list");
if(c.style.display=="none"){
c.style.display="block";
}else{
c.style.display="none";
}
}

function xuanzhong(a){
//隐藏
document.getElementById("list").style.display="none";
//取值
document.getElementById("sel").innerText = a.innerText;
}

</script>
</html>

时间: 2024-10-14 20:34:06

div做下拉列表的相关文章

用div做下拉列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

9月23日 用DIV做下拉列表

<style type="text/css">*{ margin:0px auto; padding:0px}#xiala{ width:180px; height:33px; border:1px solid #999;text-align:center; line-height:33px; vertical-align:middle; }#xiala:hover{ cursor:pointer} #zi{width:180px; height:150px; border

使用UGUI做下拉列表的方案

前一段做一个NPC浏览器,需要做一个类似于动态查询的东西,在文本框里输入关键字,然后检索数据,将符合要求的数据以列表的方式显示在文本框下面的下拉列表里. 效果差不多就是这样吧. 虽然和实际上的下拉列表不太像,但是原理方案都是相同的.无非是将文本框变成Button. OK,下拉列表,就是Button集合+ScrollRect. 我不会手把手教你怎么拖组件,我只能告诉你,选定父节点,添加ScrollRect,然后创建子节点,将子节点作为容器赋值给Content.当然还需要添加Mask组件, 来遮挡过

用div做有序列表,非常重要!!!

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #apDiv1 { pos

用idv做下拉列表,很重要

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .fengjingqu { position:relative; margin:0 auto; width: 100px; height: 50p

display: table-cell,用div做分列布局

table-cell我们却能用得到,而且是用它来干一件很重要的事情——多列布局. 多列布局在css中有多重要就不用我说了吧,传统模式下大家都使用float来解决这一问题,但是float写出来的东西代码复杂,宽度调整不灵活,浏览器兼容性有问题.所以才有了新方案——table-cell,注意,IE6.7不行! 简单举个例子: 记得我刚学html时候,不会用div + css做多列布局,我就用table做多列布局.而今,你可以用table-cell,像用table一样做多列布局,做出来的效果和tabl

使用div做输入框chrome和firefox当中光标问题的解决方法

光标问题在ie的解决方法和chrome.firefox的解决方法 //element是文本对象,location是光标移动的位置function setPos(element, location){ if(element.createTextRange{//IE下 var range = element.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('charac

9.22下午 JS\document例题讲解

作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> <div style="width:200px; height:300px; float:left"> <select id="list1" size="10" style="width:200px; height:300p

下拉列表的制作

圣诞节后上课就是不在状态,一整天都在神游,还感觉特别累,本来想休息休息的,结果某人看不惯我一直吃东西,非得把电脑给我打开,让整理今天所学的内容,想了一下,确实上午讲的用无序列表<ul>做的下拉列表还不熟练,之前一直都是在用<div>做的,下面是用<ul>做的示例: <style> *{ margin:0px; padding:0px;} .a{ margin: auto; height:50px; width:460px; position:relative