javascript-省市區與分類多級聯動的外掛
阿新 • • 發佈：2019-02-17
(function($){
// 定義外掛全域性變數，可以在其他的函式中引用
var config;
// 定義所有的執行方法
var methods = {
// 初始化開始例項函式
begin : function(options) {
return this.each(function(){
// 判斷目標DOM是否存在
var $this = $(this);
if($this.length < 1) {
return false;
}
/** 預設配置引數和配置值
*data:json資料
*idfield：每一個類別id值的欄位，預設id
*namefield:種類名稱的欄位
*childrenfield: 子級種類名稱的欄位
*required:必選項，是否顯示”請選擇“,預設false,顯示
` */
var settings = $.extend({
data:null,
idfield:"id",
namefield:"category",
childrenfield:"children",
required: false
},options);
config = settings;
var screewidth = $(document).width()*0.5;
$this.parent().css({
"position":"relative",
"height":"34px"
});
$this.css({
"position":"absolute",
"width":screewidth
});
// 變數定義
var box_obj = $this;
// 後端的所有資料json格式
var data_json;
// 父級的select元素
var parent_tpl = '<select class="wire-parent wire-select"></select>';
// 子級的select元素
var children_tpl = '<select class="wire-select"></select>';
// select元素的樣式
var cssstyle = {
"background-color": "#fff",
"background-image": "none",
"border": "1px solid #ccc",
"border-radius":"4px",
"box-shadow": "0 1px 1px rgba(0, 0, 0, 0.075) inset",
"color": "#555",
"font-size": "14px",
"height": "34px",
"line-height":"1.42857",
"padding": "3px 6px",
"transition": "border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s"
};
// 父級select選擇框
$(parent_tpl).appendTo(box_obj).css(cssstyle);
var select_prehtml = (settings.required) ? "" : "<option value='' data-list=''>請選擇</option>";
var parent_obj = box_obj.find('.wire-parent');
//初始化函式
var init = function() {
var temp_html = select_prehtml;
$.each(data_json,function(i,parent) {
if(typeof(data_json[i][settings.childrenfield]) == "undefined") {
temp_html += "<option value='" + parent[settings.idfield] + "' data-list=''>" + parent[settings.namefield] + "</option>";
}else if(typeof(data_json[i][settings.childrenfield])=="object") {
var list = JSON.stringify(data_json[i][settings.childrenfield]);
temp_html += "<option value='" + parent[settings.idfield] + "' data-list='"+list+"'>" + parent[settings.namefield] + "</option>";
}
});
parent_obj.html(temp_html);
}
var hello = function() {
alert(select_prehtml);
}
// 設定json資料
if (typeof (settings.data) == "string") {
$.getJSON(settings.data, function(json) {
data_json = json;
init();
});
} else {
data_json = settings.data;
init();
}
// 設定選擇下一級函式
box_obj.on("change",'.wire-select',function(){
var temp_html = select_prehtml;
var data = $(this).find("option:selected").attr("data-list");
$(this).nextAll().remove();
if(data=='') {
return false;
}
//下一級顯示
data=JSON.parse(data);
$.each(data,function(i,parent) {
if(typeof(data[i][settings.childrenfield]) == "undefined") {
temp_html += "<option value='" + parent[settings.idfield] + "' data-list=''>" + parent[settings.namefield] + "</option>";
}else if(typeof(data[i][settings.childrenfield])=="object") {
var list = JSON.stringify(data[i][settings.childrenfield]);
temp_html += "<option value='" + parent[settings.idfield] + "' data-list='"+list+"'>" + parent[settings.namefield] + "</option>";
}
});
$(children_tpl).appendTo(box_obj).html(temp_html).css(cssstyle);
});
});
},
/**獲取對應逐級分類的值
*可以獲取任意一級
*
*/
categoryid : function() {
var $this = this;
var first = $this.find("select.wire-select:first");
var value = first.find("option:selected").val();
if(value=="") {
return value;
}
var target = $this.find("select.wire-select:last");
if(target.find("option:selected").val()=="") {
target = target.prev();
}
return target.find("option:selected").val();
}
}
// 定義暴露函式
$.fn.wileselect = function(){
var method = arguments[0];
if(methods[method]) {
method = methods[method];
//將含有length屬性的陣列獲取從第下標為1的之後的陣列元素，並返回陣列
arguments = Array.prototype.slice.call(arguments,1);
}else if(typeof(method)=="object" || !method) {
method = methods.begin;
}else{
$.error( 'Method ' + method + ' does not exist plug on jQuery.wileselect' );
return this;
}
//jquery的例項物件將擁有執行method的能力,並且arguments為method的引數
return method.apply(this,arguments);
}
})(jQuery);
// 定義外掛全域性變數，可以在其他的函式中引用
var config;
// 定義所有的執行方法
var methods = {
// 初始化開始例項函式
begin : function(options) {
return this.each(function(){
// 判斷目標DOM是否存在
var $this = $(this);
if($this.length < 1) {
return false;
}
/** 預設配置引數和配置值
*data:json資料
*idfield：每一個類別id值的欄位，預設id
*namefield:種類名稱的欄位
*childrenfield: 子級種類名稱的欄位
*required:必選項，是否顯示”請選擇“,預設false,顯示
` */
var settings = $.extend({
data:null,
idfield:"id",
namefield:"category",
childrenfield:"children",
required: false
},options);
config = settings;
var screewidth = $(document).width()*0.5;
$this.parent().css({
"position":"relative",
"height":"34px"
});
$this.css({
"position":"absolute",
"width":screewidth
});
// 變數定義
var box_obj = $this;
// 後端的所有資料json格式
var data_json;
// 父級的select元素
var parent_tpl = '<select class="wire-parent wire-select"></select>';
// 子級的select元素
var children_tpl = '<select class="wire-select"></select>';
// select元素的樣式
var cssstyle = {
"background-color": "#fff",
"background-image": "none",
"border": "1px solid #ccc",
"border-radius":"4px",
"box-shadow": "0 1px 1px rgba(0, 0, 0, 0.075) inset",
"color": "#555",
"font-size": "14px",
"height": "34px",
"line-height":"1.42857",
"padding": "3px 6px",
"transition": "border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s"
};
// 父級select選擇框
$(parent_tpl).appendTo(box_obj).css(cssstyle);
var select_prehtml = (settings.required) ? "" : "<option value='' data-list=''>請選擇</option>";
var parent_obj = box_obj.find('.wire-parent');
//初始化函式
var init = function() {
var temp_html = select_prehtml;
$.each(data_json,function(i,parent) {
if(typeof(data_json[i][settings.childrenfield]) == "undefined") {
temp_html += "<option value='" + parent[settings.idfield] + "' data-list=''>" + parent[settings.namefield] + "</option>";
}else if(typeof(data_json[i][settings.childrenfield])=="object") {
var list = JSON.stringify(data_json[i][settings.childrenfield]);
temp_html += "<option value='" + parent[settings.idfield] + "' data-list='"+list+"'>" + parent[settings.namefield] + "</option>";
}
});
parent_obj.html(temp_html);
}
var hello = function() {
alert(select_prehtml);
}
// 設定json資料
if (typeof (settings.data) == "string") {
$.getJSON(settings.data, function(json) {
data_json = json;
init();
});
} else {
data_json = settings.data;
init();
}
// 設定選擇下一級函式
box_obj.on("change",'.wire-select',function(){
var temp_html = select_prehtml;
var data = $(this).find("option:selected").attr("data-list");
$(this).nextAll().remove();
if(data=='') {
return false;
}
//下一級顯示
data=JSON.parse(data);
$.each(data,function(i,parent) {
if(typeof(data[i][settings.childrenfield]) == "undefined") {
temp_html += "<option value='" + parent[settings.idfield] + "' data-list=''>" + parent[settings.namefield] + "</option>";
}else if(typeof(data[i][settings.childrenfield])=="object") {
var list = JSON.stringify(data[i][settings.childrenfield]);
temp_html += "<option value='" + parent[settings.idfield] + "' data-list='"+list+"'>" + parent[settings.namefield] + "</option>";
}
});
$(children_tpl).appendTo(box_obj).html(temp_html).css(cssstyle);
});
});
},
/**獲取對應逐級分類的值
*可以獲取任意一級
*
*/
categoryid : function() {
var $this = this;
var first = $this.find("select.wire-select:first");
var value = first.find("option:selected").val();
if(value=="") {
return value;
}
var target = $this.find("select.wire-select:last");
if(target.find("option:selected").val()=="") {
target = target.prev();
}
return target.find("option:selected").val();
}
}
// 定義暴露函式
$.fn.wileselect = function(){
var method = arguments[0];
if(methods[method]) {
method = methods[method];
//將含有length屬性的陣列獲取從第下標為1的之後的陣列元素，並返回陣列
arguments = Array.prototype.slice.call(arguments,1);
}else if(typeof(method)=="object" || !method) {
method = methods.begin;
}else{
$.error( 'Method ' + method + ' does not exist plug on jQuery.wileselect' );
return this;
}
//jquery的例項物件將擁有執行method的能力,並且arguments為method的引數
return method.apply(this,arguments);
}
})(jQuery);