这是select2插件使用的第二篇，可参考第一篇 select2插件使用小记。上一篇主要是关于基本的使用，这篇主要是关于多选，及联动的。侧重点不同。
效果图如下：
遵从W3C标准：结构、样式、行为。以下分别是html、css、js代码。
html主要代码如下：
多选：需要设值select元素 - name="name[]" ， 及 multiple="multiple"。
<div class="form-wrap">
<div class="field-value-list">
<p class="field-value-list-left"><span class="field-value"><i class="asterisk">*</i>行业选择：</span></p>
<div class="field-value-list-right">
<div class="field-value">
<p>
<select id="in_f" class="sel2-mul-not-null industry" name="in_f[]" data-next="in_s" multiple="multiple"> </select>
<span id="in_f_desc" class="check-result info-content-tip form-item-true"> </span>
</p>
<p style="margin-top: 10px;">
<select id="in_s" class="sel2-mul-not-null industry" name="in_s[]" data-next="in_t" multiple="multiple"> </select>
<span id="in_s_desc" class="check-result info-content-tip form-item-true"> </span>
</p>
<p style="margin-top: 10px;">
<select id="in_t" class="industry" name="in_t[]" multiple="multiple"> </select>
<span>非必填</span>
<span id="in_t_desc" class="check-result info-content-tip form-item-true"> </span>
</p>
</div>
</div>
</div>
</div>
渲染模板内容如下：
备注：使用了jsrender渲染模板，需要引入jsrender.js, 可不使用，使用其他方式。主要功能是循环渲染select的option的内容，减少字符串的拼接。
<!-- 选择下拉框选项 -->
<script type="text/x-jsrender" id="tp_sel">
{{for data}}
<option value="{{:id}}" title="{{:text}} [{{:id}}]">{{:text}}</option>
{{/for}}
</script>
css主要样式如下：
/* select2样式重设 */
.select2-container--default .select2-selection--multiple {
min-height: 28px;
background: #f5f5f5;
border-color: #bbb;
border-radius:;
line-height: 22px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple{
overflow: auto;
max-height: 120px;
background: #fff;
border-color: #bbb;
}
.select2-container--default .select2-search--inline .select2-search__field {
margin-top:;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
overflow: hidden;
margin-top: 4px;
max-width: 100px;
height: 20px;
line-height: 20px;
text-overflow: ellipsis;
} .form-wrap {
margin: 70px;
}
.field-value-list{
margin-bottom: 10px;
}
.field-value-list-left{
float: left;
width: 96px;
height: 30px;
line-height: 30px;
}
.field-value-list-left .field-value{
display: block;
font-size: 14px;
text-align: right;
color: #333;
}
.field-value-list-right{
margin-left: 86px;
padding-left: 25px;
min-height: 30px;
line-height: 30px;
text-align: left;
}
.field-value-list-right .field-value{
display: inline-block;
margin-right: 10px;
min-height: 30px;
line-height: 30px;
vertical-align: top;
font-size: 12px;
}
.field-value-list-right .field-value select {
padding-left: 4px;
padding-right:4px;
width: 320px;
max-width: 320px;
height: 28px;
background-color: #f5f5f5;
border:1px solid #bbbbbb;
line-height: 20px;
font-size: 12px;
color:#333333;
vertical-align: top;
}
.field-value-list-right .field-value select:focus{
background-color: #fff;
}
.field-value-list-right span.form-item-false{
color:#e40000;
}
.field-value-list-right span.form-item-true{
display: none;
}
.field-value-list-left span i{
display: inline-block;
height: 30px;
width: 20px;
text-align: center;
line-height: 30px;
font-style: normal;
font-size: 14px;
color: #ff0000;
}
.field-value-list-left span i.asterisk{
width: 10px;
font-size: 12px;
line-height: 30px;
}
js主要代码如下：
<script src="js/jquery.min.js"></script>
<script src="select2/select2.full.min.js"></script>
<!-- 模板渲染引擎 -->
<script src="js/jsrender.js"></script>
<script>
var map = {
"in_f": [
{
"id": 1,
"text": "网络服务",
"children": [
{
"id": 2,
"text": "网络服务-资讯",
"children": [
{
"id": 3,
"text": "资讯-综合门户"
},
{
"id": 4,
"text": "资讯-汽车"
},
{
"id": 5,
"text": "资讯-房产"
},
{
"id": 6,
"text": "资讯-军事"
}
]
},
{
"id": 11,
"text": "网络服务-生活服务",
"children": [ ]
},
{
"id": 13,
"text": "网络服务-社交",
"children": [
{
"id": 14,
"text": "社交-休闲"
},
{
"id": 15,
"text": "社交-婚恋"
},
{
"id": 16,
"text": "社交-商务"
}
]
}
]
},
{
"id": 35,
"text": "游戏",
"children": [
{
"id": 36,
"text": "游戏-客户端",
"children": [ ]
},
{
"id": 37,
"text": "游戏-网页",
"children": [ ]
}
]
},
{
"id": 43,
"text": "零售",
"children": [
{
"id": 47,
"text": "零售-垂直B2C",
"children": [
{
"id": 48,
"text": "垂直B2C-数码家电"
},
{
"id": 49,
"text": "垂直B2C-服装鞋帽"
},
{
"id": 50,
"text": "垂直B2C-食品饮料"
},
{
"id": 51,
"text": "垂直B2C-个护化妆"
}
]
},
{
"id": 56,
"text": "零售-票务平台",
"children": [ ]
}
]
}
],
"in_s": [ ],
"in_t": [ ]
}; $(function () {
/* 多选 联动 */
var selectMod = {
initSelect: function ($target) { // 初始化
$target.select2({
placeholder: '请选择(可多选)',
language: {
noResults: function() {
return "暂无数据"
}
}
});
},
editInitSelected: function ($target, val) {
$target.val(val).trigger('change');
},
renderNext: function () { // 下拉多选联动
var $this = $(this),
cur = $this.attr('id'),
curVal = $('#'+cur).val(),
next = $this.data('next'),
$next = $('#'+next),
tp = $('#tp_sel'),
curArr = map[cur] || [];
if (curVal) {
if (next && $next.length && curArr.length) {
var arr = curArr.filter(function (obj) {
if (curVal.indexOf(obj.id+'') != -1) {
return obj;
}
}).map(function (obj) {
if (obj && obj.children && obj.children.length) {
return obj.children;
}
});
map[next] = [].concat.apply([], arr); // 二维数组转换为一维数组
$next.html(tp.render({data:map[next]})).change();
}
} else {
if (next && $next.length) {
$next.html(tp.render({data:map[next]})).change();
}
}
}
}; var industryMod = {
event: function () {
$('body').on('change', '.industry', selectMod.renderNext);
},
init: function () {
this.event();
$('#in_f').html($('#tp_sel').render({data:map.in_f}));
selectMod.initSelect($('#in_f, #in_s, #in_t'));
},
// 假如有回填信息，调用该方法即可
editInit: function () {
// 回填信息，按照联动顺序，依次赋值
var editInfo = {
in_f: ['1'],
in_s: ['2'],
in_t: ['3', '4']
};
selectMod.editInitSelected($('#in_f'), editInfo.in_f);
selectMod.editInitSelected($('#in_s'), editInfo.in_s);
selectMod.editInitSelected($('#in_t'), editInfo.in_t);
}
};
industryMod.init();
})
</script>