擴展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
});
}
});