jquey写的select下拉插件 解决了自带option宽度不能改变的问题
1,html代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/selectAuto.js"></script>
<link type="text/css" href="css/selectAuto.css" rel="stylesheet"/>
<script type="text/javascript">
$(document).ready(function () {
$("#selectId").selectAuto({
title:"所有分类",
width:200,
height:200,
data: [
{key: "0", value: "所有分类"},
{key: "1", value: "测试1"},
{key: "2", value: "测试2"},
{key: "3", value: "测试3"},
{key: "4", value: "测试4"}
],
callback:function(){
},
onSelect:function(key,val){
alert(key);
}
});
});
</script>
</head>
<body>
<div id="selectId"></div>
</body>
</html>
2，js代码
(function ($) {
$.fn.selectAuto = function(_4b,_4c){
if(typeof _4b=="string"){
var _4d=$.fn.selectAuto.methods[_4b];
if(_4d){
return _4d(this,_4c);
}
}
_4b=_4b||{};
var defaults = {
title:"",//下拉提示
width: 200,
height: 150,
url:null, //远程接口加载数据
type:"get", //接口调用方式 默认是get方式
dataType:"json",//数据返回格式 默认为json格式
param:null,
data:null, //加载本地数据
callback:null, //自定义回调方法
locationStyle:{left: "3px", top:"26px"},//默认位置
onSelect:function(){} //下拉选中事件
}
var options = $.extend(defaults, _4b);
this.each(function(){
var thisSelect=$(this);
var _ids=thisSelect[0].id;
thisSelect[0].style.position="relative";
var html='<span id="'+_ids+'_select_title_span" class="select_title_span" style="width:'+options.width+'px;"> ' +
' <span id="'+_ids+'_select_title" class="select_title" style="width:'+options.width+'px;">'+options.title+'</span>'+
' <b class="select_icon"></b>'+
'</span>'+
'<div id="'+_ids+'_option_box_div" class="option_box_div" style="display:none;width:'+(options.width+10)+'px;">'+
' <span id="'+_ids+'_data_li" style="width:'+(options.width+20)+'px;height:'+options.height+'px;">'+
' </span></div>';
thisSelect.empty().append(html);
$("#"+_ids+"_option_box_div").css(options.locationStyle);
if(options.data!=null){
$.fn.selectAuto.methods. _5d(_ids,options.data);
}else{
if(options.url){
$.ajax({type:options.type,url:options.url,data:options.param,dataType:options.dataType,success:function(_d){
$.fn.selectAuto.methods. _5d(_ids,_d);
},error:function(){
}});
}
}
if(typeof options.callback=="function"){
options.callback();
}
thisSelect.find("span#"+_ids+"_select_title_span").bind("click", function () {
if($(this).next().is(":hidden")){
$(this).next().show();
$("#"+_ids+"_option_box_div span p").each(function(i,item){
if($("#"+_ids+"_select_title_span>span").text() == $(this).attr('title')){
$(this).addClass("option_selected");
}else{
$(this).removeClass("option_selected");
}
})
}else{
$(this).next().hide();
}
});
thisSelect.find("div#"+_ids+"_option_box_div>span>p").bind("click", function () {
var $title=$("#"+_ids+"_select_title");
$title.html($(this).html());
$title.attr("valueId",$(this).attr("key"));
$("#"+_ids+"_option_box_div").hide();
if(typeof options.onSelect=="function"){
options.onSelect($(this).attr("key"),$(this).html());
}
});
});
};
$.fn.selectAuto.methods={
setValue:function(_this,data){
var $title=$("#"+_this[0].id+"_select_title");
var key,value;
if(typeof data=="string"){
key=data;value=data;
}else if(typeof data=="object"){
key=data.key;value=data.value;
}
$title.html(value);
$title.attr("valueId",key);
$(".option_box_div ul li p").each(function(i,item){
if(value == $(this).attr('title')){
$(this).addClass("option_selected");
}else{
$(this).removeClass("option_selected");
}
});
},getValue:function(_this){//获取选中的值
return $("#"+_this[0].id+"_select_title").attr("valueId");
},getText:function(_this){//获取选中的显示值
return $("#"+_this[0].id+"_select_title").text();
},loadData:function(_this,data){
_5d(_this[0].id,data);
},clearData:function(_this){
$("#"+_this[0].id+"_data_li").empty();
},_5d:function(_i,_d){
var html="";
$.each(_d, function(key, d){
html+=' <p key="'+ d.key+'" title="'+ d.value+'">'+ d. value+'</p>';
});
$("#"+_i+"_data_li").empty().append(html);
}
}
})(jQuery);
3，css代码
.select_title_span{
display:inline-block; height:16px; padding:3px 10px 4px 10px; border:1px solid #cccccc;
line-height:16px; outline:0 none; background-color:#ffffff; cursor:pointer;
margin-right:5px;position:absolute;
}
.select_icon{
display:inline-block; width:14px;height:8px; overflow:hidden;
background:url(../img/bg_dropd.png) no-repeat 0 0;
float:right;
margin-top: 4px;;
}
.option_selected{background-color:#008573; color:#ffffff;}
.option_box_div{ position:absolute;border: 1px solid #aaaaaa;background-color: #ffffff;}
.option_box_div span{float:left;*position:relative;overflow-x: hidden;overflow-y:scroll; }
.option_box_div span p{cursor:pointer;}
4，附件为所需素材和效果图