這是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: 0; 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: 0; } .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>