本文主要是介绍javascript-省市区与分类多级联动的插件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
前言
最近公司一直在优化项目，需要用到一个无限级的分类，希望在选择的时候，可以做到细分，将对应的视频，教学资料按照一定的规则来进行分类，后来写了这一个插件。
wileselect.js代码：
(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);
html代码：
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body>
<div class="container" id="main">
<div class="demo" style="margin-top:30px">
<div class="row">
<div class="col-md-12 form-horizontal">
<div class="form-group" class="col-md-3">
<label for="exampleInputEmail1" class="col-md-1">课程分类</label>
<div class="col-md-2">
<div id="category">
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<button type="button" οnclick="save()">保存</button>
</div>
</div>
<script type="text/javascript" src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>
<script type="text/javascript" src="select2.js"></script>
<script type="text/javascript">
$(function() {
$("#category").wileselect({
data:[
{"id":1, "category": "前端课程", "children": [{"id":2,"category": "HTML5"}, {"id":3,"category": "CSS3", "children": [{"id":4,"category":"HTML","children":[{"id":22,"category":"HTML5"},{"id":25,"category":"HTML4"}]}, {"id":5,"category": "AJAX"}]}, {"id":6,"category": "JSON"}]},
{"id":7,"category": "编程语言", "children": [{"id":8,"category": "C"}, {"id":9,"category": "C++"}, {"id":10,"category": "Python"}, {"id":11,"category": "PHP"}, {"id":12,"category": "JAVA"}]},
{"id":13,"category": "数据库", "children": [{"id":14,"category": "Mysql"}, {"id":15,"category": "SqlServer"}, {"id":16,"category": "Oracle"}, {"id":17,"category": "Mssql"},{"id":33,"category": "NOSQL","children":[{"id":34,"category":"mongodb"}]}]},
]
});
});
//
function save() {
// 直接获取最后一级选择的值
var id = $("#category").wileselect("categoryid");
alert(id);
}
</script>
</body>
</html>
data：可以从服务端返回json数据
demo：
这篇关于javascript-省市区与分类多级联动的插件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
