说明：jquery.selectCity.js输入框弹出层，是指在input选择框里，单击鼠标便可以弹出一个层，供用户进行选择。
如图：
兼容浏览器：IE6+/Firefox/Google Chrome
官方链接：本人根据网上自己写的插件
JS下载：http://www.ijquery.cn/js/jquery.selectCity.js
注意：需要一个插件进行辅助即:jquery.bgiframe.js。下载地址：http://www.ijquery.cn/js/jquery.bgiframe.js。此插件的作用是http://www.cnblogs.com/waynechan/archive/2012/06/29/2570039.html
提示： jquery.bgiframe.js-苦逼的程序猿都知道，IE6的使用情况在天朝还是挺普遍的，特别是在爱写日记的领导群中更加喜欢，如果我们做的网 页上有下拉框、Div浮动层、 Dialog之类的，会看到下拉选框总是把浮动区块div覆盖划破，而我尝试使用z-index属性也未能解决，但我们可以使用bgiframe 插件解决IE6 的这个bug。
预览： http://www.ijquery.cn/study/demo/selectCity
打包下载：http://www.ijquery.cn/study/demo/selectCity/selectCityr.zip
JS代码：
[js]
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery.bgiframe.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery.selectCity.js"></script>
<script type="text/javascript">
$(function(){
$("#text_sea").selectCity("#selectItem");
});
</script>
[/js]
HTML代码：
[html]
<input type="text" id="text_sea" name="keyword" value="目的地/景点/城市" onFocus="if(value =='目的地/景点/城市'){value =''}" onBlur="if(value ==''){value='目的地/景点/城市'}" />
<!--输入框弹出 start-->
<div id="selectItem">
<div id="selectItemAd">
<div id="selectItemTitle">输入城市/景点/目的地或在下列关键字中选择</div>
<div id="selectItemClose">关闭</div>
</div>
<div id="selectItemCount">
<dl>
<dt><strong>国内旅游</strong></dt>
<dd><a href="#"><u>北京</u></a><a href="#"><u>海南</u></a><a href="#">海口</a><a href="#">三亚</a><a href="#"><u>云南</u></a><a href="#">大理</a><a href="#">丽江</a><a href="#">西双版纳</a><a href="#">厦门</a><a href="#">张家界</a><a href="#">九寨沟</a><a href="#">桂林</a><a href="#">大连</a></dd>
</dl>
<dl>
<dt><strong>出境旅游</strong></dt>
<dd><a href="#">东南亚</a><a href="#">韩国</a><a href="#">香港</a><a href="#">澳门</a><a href="#"><u>泰国</u></a><a href="#">澳大利亚</a><a href="#">欧洲</a><a href="#">非洲</a><a href="#">俄罗斯</a><a href="#">马尔代夫</a><a href="#">巴厘岛</a><a href="#">美国</a></dd>
</dl>
<dl>
<dt><strong>周边旅游</strong></dt>
<dd><a href="#">一日游</a><a href="#">二日游</a><a href="#">踏青赏花</a><a href="#">千岛湖</a><a href="#">上海</a><a href="#">苏州</a><a href="#">杭州</a><a href="#">南京</a><a href="#">扬州</a><a href="#">无锡</a><a href="#">桐庐</a><a href="#">泰州</a><a href="#">镇江</a><a href="#">游山玩水</a><a href="#">水乡古镇</a><a href="#">主题乐园</a></dd>
</dl>
<dl>
<dt><strong>主题旅游</strong></dt>
<dd><a href="#">踏青赏花</a><a href="#">蜜月旅游</a><a href="#">周末休闲</a></dd>
</dl>
</div>
</div>
<!--输入框弹出 end-->
[/html]
CSS代码：
[css]
.text1 {padding:4px 2px;color:#666;border:1px solid #aaa;background:#fff;}
/*输入框弹出*/
.selectItemcont{padding:5px 0 10px 10px;clear:both;overflow:hidden;zoom:1;}
#selectItem{background:#FFF;position:absolute;top:0px;left:center;border:3px solid #690;overflow:hidden;width:358px;z-index:1000;}
.selectItemtit{line-height:24px;height:26px;padding:0 10px;background:#690;color:#fff;font-size:14px;}
.selectItemleft{float:left;}
.selectItemright{float:right;cursor:pointer;color:#f00;}
.selectItemcls{clear:both;font-size:0px;height:0px;overflow:hidden;}
.selectItemhidden{display:none;}
.select_dl1 {width:106px;margin-right:10px;overflow:hidden;zoom:1;float:left;}
.select_dl1 dt,.select_dl2 dt {height:20px;line-height:20px;color:#f60;border-bottom:1px dotted #e6e6e6;}
.select_dl1 dd,.select_dl2 dd {overflow:hidden;zoom:1;}
.select_dl1 dd a {display:block;width:48px;height:24px;line-height:24px;color:#333;margin-right:5px;float:left;}
.select_dl1 dd a:hover,.select_dl2 dd a:hover {color:#f30;}
.select_dl2 {width:338px;margin-right:10px;float:left;}
.select_dl2 dt {}
.select_dl2 dd a {display:block;width:60px;height:24px;line-height:24px;color:#333;margin-right:5px;float:left;}
.selectItemcont u {color:#690;text-decoration:none;}
[/css]