经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › 这种效果很好看，不知道怎么做的？？大家研究下。

查看: 1747|回复: 5

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

zhemohao　楼主

想你的我

高级会员

帖子: 340
体力: 840
威望: 0

发表于 2007-3-12 15:43:47 |显示全部楼层

www.qunar.com
“出发城市”和“到达城市”后边的input控件

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

有和be有关的单词都出现了，中文也是一样。
这种效果怎么做的啊？很着急。
拜托各位了。

好东西大家分享.

西部数码顶级域名注册商39元抢注！

使用道具举报

mozart0　

匪徒田老大

荣誉管理

帖子: 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">

</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>              <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 |显示全部楼层

<!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">

</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[i][0]+");'>"+cityArray[i][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[i][0]+"'><a href=javascript:inputvalue('"+ok[i][0]+"');>"+ok[i][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>

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