请选择 进入手机版 | 继续访问电脑版
收藏本站腾讯微博新浪微博
点点网模板设计大赛 phpchina

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 用悬赏 三天解决问题 解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动 地图任务 邮件更新任务:保护帐号安全

积分换实物,来参加蓝色理想积分兑换吧! 联系招聘客服 蓝色理想帮你找工作! 万元奖励等你拿——点点网模板设计大赛

查看: 1747|回复: 5

这种效果很好看,不知道怎么做的??大家研究下。 [复制链接]

zhemohao 楼主

想你的我

高级会员

帖子
340
体力
840
威望
0
发表于 2007-3-12 15:43:47 |显示全部楼层
www.qunar.com
“出发城市”和“到达城市”后边的input控件

单击input控件后,可以选择top20热门城市;也可以自己输入内容,支持中文和英文输入,例如输入be,所

有和be有关的单词都出现了,中文也是一样。
这种效果怎么做的啊?很着急。
拜托各位了。
好东西大家分享.
西部数码顶级域名注册商39元抢注!

匪徒田老大

荣誉管理

帖子
2382
体力
13417
威望
180
发表于 2007-3-12 16:50:17 |显示全部楼层
可以看看思路:
http://bbs.blueidea.com/thread-2466579-2-1.html
http://bbs.blueidea.com/thread-2466579-1-1.html

细节问题自己去琢磨着改动吧

[ 本帖最后由 mozart0 于 2007-3-12 16:52 编辑 ]
居处恭 执事敬 与人忠
租服务器,上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具 举报

ljlyy 
帖子
116
体力
490
威望
1
居住地
广东省 广州市
发表于 2007-3-12 21:25:12 |显示全部楼层

这个是我以前用过的城市的选择,有些城市没加下级城市

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
div{
width:200px;
border:1px solid #ffc264;
}
ul{
margin:0;
}
li{
margin:0;
font-size:9pt;
text-align:left;
display:block;
float:left;
padding:4px;
}
a:link, a:visited{
text-decoration:none;
color:#0099FF;
}
a:hover{
text-decoration:underline;
}
-->
</style>
<script language="javascript" type="text/javascript">
window.onload=function(){
addr.style.display="none";
}

//关闭所有显示
function closeDiv(){
addr.style.display="none";
}
//备选城市的数组
var cityArray=
[
["city","城市"],
["sz","深圳"],
["dg","东莞"],
["gz","广州"],
["zs","中山"],
["hz","惠州"],
["zh","珠海"]
];
//城市下的区镇等地点的数组
//深圳下的区
var sz=
[
["lh","罗湖"],
["ft","福田"],
["yt","盐田"],
["ns","南山"],
["ba","宝安"],
["lg","龙岗"]
];

//东莞下的镇
var dg=
[
["ca","长安"],
["dl","大郎"],
["tx","塘厦"],
["lb","廖步"],
["hm","虎门"],
["dls","大岭山"]
]

//显示所有城市
function showcity()
{
strhtm="<ul id='"+cityArray[0][0]+"'><li style='background-color:#feeed5;width:192px;text-align:left;'><a href='javascript:closeDiv()'>[关闭]</a><li>";
for (i=1;i<cityArray.length;i++)
{
strhtm=strhtm+"<li><a href='javascript:showX("+cityArray[0]+");'>"+cityArray[1]+"</a><li>";
}
strhtm=strhtm+"</ul>";
addr.innerHTML=strhtm;
//alert(strhtm);
addr.style.display="block";
}

//显示所选城市下的区或镇
function showX(ok){
strhtm="<ul><li style='background-color:#feeed5;width:192px;text-align:left;'><a href='javascript:showcity()'>返回城市列表</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='javascript:closeDiv()'>[关闭]</a><li>";
for(i=0;i<ok.length;i++)
{
strhtm=strhtm+"<li id='"+ok[0]+"'><a href=javascript:inputvalue('"+ok[0]+"');>"+ok[1]+"</a><li>";
}
strhtm=strhtm+"</ul>";
addr.innerHTML=strhtm;
}

//把所选的区或镇的值传到text中
function inputvalue(ok){
//alert(ok);
var inputL=document.getElementById("address");
var lilabel=document.getElementById(ok);
var livalue=lilabel.innerText;
//alert(lilabel);
inputL.value=livalue;
addr.style.display="none";
}
</script>
</head>

<body>
<input type="text" name="address" id="address" onfocus="showcity()"/>
<div id="addr"></div>
</body>
</html>

使用道具 举报

csshtm 
帖子
93
体力
524
威望
0
发表于 2007-3-12 23:11:37 |显示全部楼层
二楼挺机灵的 . . .呵呵

使用道具 举报

csz83 
帖子
180
体力
748
威望
0
居住地
广东省 广州市
发表于 2007-3-14 12:59:02 |显示全部楼层

 提示:您可以先修改部分代码再运行

使用道具 举报

帖子
115
体力
481
威望
0
居住地
湖南省 长沙市
发表于 2007-3-15 14:37:23 |显示全部楼层
5楼的喜欢!

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2012-2-13 09:27 , Processed in 0.112368 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部