<!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>jquery下拉选择城市插件hhDrop - 站长素材</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/hhDrop.js"></script>
<script>
$(function(){
$('#hhDrop00').hhDrop({});
$('#hhDrop01').hhDrop({});
})
</script>
</head>
<body>
<div class="lineSearch">
<ul>
<li class="thRelative" id="hhDrop00">
<div class="boxSearch">
<span class="key_word">
<b class="size_14">北京</b>
出发城市
</span>
<em class="ico thLeft ico_shBlue"></em>
<a class="thRight ico btn_search" href="javascript:void(0)"></a>
</div>
<div class="search_form_suggest" style="display:none;">
<h3><a class="ico btn_close thRight" item="close">关闭</a>热门出发城市</h3>
<dl class="search_hotList">
<dd class="clr_after">
<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>
<a href="#">天津</a>
<a href="#">哈尔滨</a>
<a href="#">苏州</a>
<a href="#">南宁</a>
</dd>
</dl>
<div class="clear"></div>
</div>
</li>
<li class="thRelative" id="hhDrop01">
<div class="boxSearch">
<span class="key_word">
<b class="size_14">广州</b>
到达城市
</span>
<em class="ico thLeft ico_shBlue"></em>
<a class="thRight ico btn_search" href="javascript:void(0)"></a>
</div>
<div class="search_form_suggest" style="display:none;">
<h3><a class="ico btn_close thRight" item="close">关闭</a>热门出发城市</h3>
<dl class="search_hotList">
<dd class="clr_after">
<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>
<a href="#">天津</a>
<a href="#">哈尔滨</a>
<a href="#">苏州</a>
<a href="#">南宁</a>
</dd>
</dl>
<div class="clear"></div>
</div>
</li>
<li>
<div class="thRelative lineSearchbg">
<em class="thLeft ico ico_serGray"></em>
<input class="thLeft" name="textfield2" type="text" id="arriveSearchText" value="请输入目的地、主题或关键词" />
<a class="ico btn_close thLeft" item="close" style="margin:8px 8px 0 0;" id="btn_delete" >删除</a>
<a class="ico btn_search" item="commit" href="javascript:void(0)">搜 索</a>
</div>
</li>
</ul>
</div>
</body>
</html>
JS代码
$(function(){
$.fn.hhDrop = function(options){
var options = jQuery.extend({
preLoadSrc:"images/loading.gif"
}, options || {});
var defaults = {};
return this.each(function(){
//默认
var options = $.extend(defaults,options);
var $this = $(this);
var $boxSearch = $this.find('.boxSearch');
var $lineSearchbg = $this.nextAll().find('.lineSearchbg');
//出发城市 到达城市
$boxSearch.click(function(){
var _this = $(this);
//点击本身显示隐藏
if(_this.hasClass('boxSearchHover') ){
_this.removeClass('boxSearchHover');
_this.children('.btn_search').removeClass('btn_search_current');
_this.parent().find('.search_form_suggest').hide();
}else{
_this.addClass('boxSearchHover');
_this.children('.btn_search').addClass('btn_search_current');
_this.parent().find('.search_form_suggest').show();
}
_this.next().find('.clr_after a').click(function(){
_this.find('span.key_word b').text($(this).text());
});
_this.next().find('.search_city_result a').click(function(){
_this.find('span.key_word b').text($(this).text());
});
//阻止冒泡
$(document).bind('click',function(event){
if(!$(event.target).parent().hasClass('boxSearch' ) && !$(event.target).hasClass('boxSearch') && !$(event.target).parent().parent().hasClass('boxSearch') && !$(event.target).hasClass('input_city') ){
_this.children('.btn_search').removeClass('btn_search_current');
_this.removeClass('boxSearchHover');
_this.parent().find('.search_form_suggest').hide();
}
});
});
$lineSearchbg.each(function(){
//搜索框 请输入目的地、主题或关键词
$(this).find('#arriveSearchText').focus(function(){
var arrive = $(this).val();
if(arrive == '请输入目的地、主题或关键词'){
$(this).val('').css('color','#000');
}
});
$(this).find('#arriveSearchText').blur(function(){
var arrive = $(this).val();
if(arrive == ''){
$(this).val('请输入目的地、主题或关键词').css('color','#b5b5b5');
}
});
//删除搜索信息
$(this).find('#btn_delete').click(function(){
$(this).prev('#arriveSearchText').focus().val('').css('color','#000');
});
});
});
}
});
全部本地做好的了，可就是按钮没反应，是不是还需要改些什么啊?看过JS了，可里面没有提交搜索链接地址的地方啊
