jquery搜索框选项下拉选择特效:
当鼠标放到箭头的时候显示隐藏的div层,然后就可以选择选项,至于选项的值,则采用在li 标签上加了value属性,这样就可以对应选项的值,在选中的时候则把选项的值传递给隐藏hidden控件,这样就达到了搜索的功能。
文本框搜索选项下拉选择效果,如下图:
调用方法:
1,搜索框位置
搜索框的位置可以根据css进行绝对地位,修改top,right的值就可以
.search {
float: left;
font-size: 14px;
border: 1px solid #ccc;
position: absolute;
top:30px;
right:300px;
}
2,函数调用
<script type="text/javascript">
$(function(){
$("#header-search").hover(function(){
$("#search-sort-list").show();
},function(){
$("#search-sort-list").hide();
});
//搜索选项选择
$("#search-sort-list li").click(function(){
var curtxt = $(this).text();
var type = $(this).val();
$('#search').val(type);
$(this).addclass("current").siblings().removeclass("current");
$(this).parent().siblings(".search-sort-txt").text(curtxt);
if(type==181)//这里是调整文字显示的宽度
{
$(".search-sort-txt").css("width","46px");
}else if(type==190){
$(".search-sort-txt").css("width","35px");
}else{
$(".search-sort-txt").css("width","30px");
}
$(this).parent().hide();
});
});
</script>