select2插件使用小记2 - 多选联动 - 笔记

　　这是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主要代码如下：

　　

 

　　

转载于:https://www.cnblogs.com/EnSnail/p/7885524.html