扩展select下拉框,(当数据过多的时候以弹出框的形式显示)
扩展select下拉框,(当数据过多的时候以弹出框的形式显示)
Table of Contents
问题描述:
- select下拉框,可能有50个值,也可能有3个值,而且3,4个值的情况还很多..当有50个值的时候,下拉框会很长,显示效果非常不好.如果直接用弹出框来显示,3,4个值的时候显示不好
解决方案
- 设定值,比如5,当小于5个值的时候用select,option来显示,
- 当大于5个的时候,用弹出框,来显示
$("select").on("click",function(){
//弹出框...
})
遇到问题
- 当大于5个时,对select用click事件,发现下拉框也下拉了,而且在弹出框的 遮罩层 的上面,特别难看.
解决方案
- 清空select中的所有option
$("select").empty();
结果
- 当点击时,会出现一个空的option,,,so….
- 该方案扑街….
补充方案
既然click后,会出现多余的弹出框,无可避免…无奈,小样,你牛逼,赢了,让你出..
添加一项option,更多…
<!-- 将value设置为空,因为一般当change的时候要执行一个方法,,所以,change里面一定要判断是否有返回值. --> <option value="">更多...</option>
在弹出框中执行后,要fire或者(jquery trigger)
具体代码&&注释
Com = {
/**
* 需要为select...调用
* maxSize 默认为5
* 当超过maxSize的数值时,会增加"更多..."一项,点击弹出弹出框,进行选择...
* 对onchange来说,当选择的是"更多"的时候,会返回''..用if(result)等方式来写
* 对于弹出框,当选择值后会自动触发change,,故不用管...
*/
SelectMore:function(conf){
var me = this;
var defaults = {
id:'', //
showProperty:[], //要显示的属性,可能是多个,中间用空格分隔显示,比如 ["code","name"]-> "001 财政"
valueProperty:'', //一般是id或者code
all:false, //是否显示全部按钮
value:[],
maxSize:5,
$dom:''
}
$.extend(defaults,conf);
this.defaults = defaults;
this.$dom = this.defaults.$dom || $("#"+this.defaults.id); //如何$dom有值,则直接用,否则用id去找
if(defaults.value.length>defaults.maxSize){
this.showSize = defaults.maxSize;
this.more= true;
}else{
this.showSize = defaults.value.length;
}
if(defaults.all){
me.$dom.append("<option value='-1'>全部</option>");
}
for(var i=0;i<this.showSize;i++){
var tempValue = defaults.value[i];
var optionContent = "";
var optionVal = tempValue[defaults.valueProperty];
for(var j=0;j<defaults.showProperty.length;j++){
var key = defaults.showProperty[j];
var opEle = tempValue[key];
optionContent += opEle+" ";
}
me.$dom.append("<option value='"+optionVal+"'>"+optionContent+"</option>");
}
if(this.more){
me.$dom.append("<option value=''>更多...</option>");
}
//弹出框--点击事件
me.$dom.on('change',function(){
var selectedText = me.$dom.find("option:selected").text();
if(selectedText != "更多..."){
return;
}
//选择第一项..
var $panel = $("<div></div>");
//添加搜索框
var $searcher = me.makeSearcher();
var $content = $("<div></div>");
$searcher.find('input').on('input',function(){
me.refreshContent($searcher,$content);
return false;
});
$panel.append($searcher);
me.refreshContent($searcher,$content);
$panel.append($content);
//弹出框调用...大同小异
me.DivWindow = new DivWindow({
content:$panel,
title:'选择框',
width:700
});
});
//=========================画弹出框中的每一个item===是一个带圆角的矩形.
this.makeRecTangle = function(conf){
var me = this;
var defaults = {
css:{
width:"150px",
height:"30px",
background:'#aaccdd',
margin:'10px 20px',
pading:'10px 20px',
"text-align":'center',
"font-weight":'bold',
"font-size":'larger',
border: "5px solid #dedede",
"-moz-border-radius": "15px", /* Gecko browsers */
"-webkit-border-radius": "15px", /* Webkit browsers */
"border-radius":"15px", /* W3C syntax */
cursor:'pointer',
float:'left'
},
text:'hello,world',
value:'1'
}
$.extend(defaults,conf);
var $recTangle = $('<div>'+defaults.text+'</div>');
$recTangle.css(defaults.css);
$recTangle.on('mouseover',function(){
$recTangle.css("border","5px solid green");
}).on('mouseout',function(){
$recTangle.css("border",defaults.css.border);
});
$recTangle.attr("value",defaults.value);
$recTangle.on('dblclick',function(){
//关闭divWin,并将value和text值返回
me.DivWindow.close();
me.$dom.val(defaults.value);
if(me.defaults.all){//如果有全部的话,放在第二项,因为第一项是全部
me.$dom.get(0).options[1].text =defaults.text;
me.$dom.get(0).options[1].value =defaults.value;
me.$dom.get(0).options[1].selected =true;
}else{ //没有全部的话,直接放在第一项,默认选中..
me.$dom.get(0).options[0].text =defaults.text;
me.$dom.get(0).options[0].value =defaults.value;
me.$dom.get(0).options[0].selected =true;
}
//-----一定要触发一下change事件
me.$dom.trigger('change');
});
return $recTangle;
}
//===================搜索框=====空时搜索全部
this.makeSearcher = function(){
var $searcher = $(' <form class="pure-form" style="width:400px;margin:0px auto 10px auto;">'
+'<input placeholder="输入搜索字符串(双击选择)" style="width:400px;">'
+'</form> ');
return $searcher;
}
//=====根据搜索框中的内容,来显示$content中的小矩形item..
this.refreshContent = function($searcher,$content){
var me = this;
$content.empty();
var value = $searcher.find('input').val();
for(var i=0;i<this.defaults.value.length;i++){
var temp = this.defaults.value[i];
//用显示的字符串进行搜索->
var properties = this.defaults.showProperty;
for(var j=0;j<properties.length;j++){
var realValue = temp[properties[j]];
if(realValue.indexOf(value)>=0 || !value){
//说明有这个..
var valueAndText = me.getValueAndText(temp);
$content.append(me.makeRecTangle(valueAndText));
break;
}
}
}
}
this.getValueAndText = function(obj){
var text = "";
var properties = this.defaults.showProperty;
var valueProperty = this.defaults.valueProperty;
for(var i=0;i<properties.length;i++){
text += obj[properties[i]]+" ";
}
var value = obj[valueProperty];
return {
text:text,
value:value
};
}
}
}
调用
html
<select id="selectRegion"></select>
js
直接new
$.ajax({
url : '.....do',
type : "post",
data : {},
success : function(result){
new Com.SelectMore({
id:'selectRegion',
showProperty:['region_code','region_name'],
valueProperty:'region_code',
value:result.region
});
}
});
