Selectize.js

<!-- 級聯公司部門 start  -->
<script>
    var $area = null;
    var eventDepart = function(){
        return function(){
            var val = $("#operDepartment").text();
            $("#operDepartment").siblings('.inputCover').val(val);
            $("#operDepartment").siblings('.inputCover').attr("data-id", $("#operDepartment").val());
        }
    }
    var $city = $("#operDepartment").selectize({
        onChange : eventDepart('onChange')
    });
    
    var eventHandler = function(name) {
        return function() {
            var control = $city[0].selectize;
            var companyId = $($area[0]).val();
            
            $.ajax({  
                url:"${config.contextpath}/member/operInfo/department2Company.do",
                type:"POST",
                data:{"companyId" : companyId},
                dataType:'json',
                success: function(data) {
                    var val = $($area[0]).text();
                    $($area[0]).siblings('.inputCover').val(val);
                    $($area[0]).siblings('.inputCover').attr("data-id", $($area[0]).val());
                    <!--添加部門 option-->
                    control.clearOptions(); 
                    var departlist = data.departlist;
                    for(var i = 0; i < departlist.length; i++){ 
                        control.addOption({  
                            value: departlist[i].id,  
                            text: departlist[i].name
                        });
                    }  
                },  
                error: function() {  
                    alert("error");
                }  
            });  
        };
    };
    
    var $area = $('#companySelect').selectize({  
        options: [],  
        create: false, 
        dropdownParent : 'body',  
        onChange : eventHandler('onChange'),  
    }); 
</script>
<!-- 級聯公司部門 end  -->

 

 

<dd>
                     <div class="lables must">所屬公司：</div>
                    <div class="inputbox input-cri" style="z-index: 10">
                        <select class="select-state1" id="companySelect">
                            <option value="">請選擇或輸入所屬公司</option>
                            <#if companylist?? && (companylist?size gt 0)>
                                <#list companylist as company>
                                    <#if operInfo?? && operInfo.companyId?? && (operInfo.companyId == company.id)>
                                        <option value="${company.id}">${company.name}</option>
                                    <#else>
                                        <option value="${company.id}">${company.name}</option>
                                    </#if>
                                </#list>
                            </#if>
                        </select>
                        <input type="text" id="operCompany" name="operCompany" value="" data-id="" class="inputCover" placeholder="請選擇或輸入所屬公司">
                    </div>
                 </dd>
                 <dd>
                     <div class="lables must">所屬部門：</div>
                    <div class="inputbox input-cri" style="z-index: 9">
                        <select class="" id="operDepartment">
                            <option value="">請選擇或輸入所屬部門</option>
                        </select>
                        <input type="text" id="operDepartment_1" name="operDepartment" value="" data-id="" class="inputCover" placeholder="請選擇或輸入所屬部門">
                    </div>
                 </dd>