jquery插件chosen 选择框

为解决下拉框内容过长问题，如下图：

级联选择：先选择企业，再选择评价对象，如果有值，下面的评价对象依旧是带有搜索框的下拉框，如果对应企业下面没有评价对象，显示‘无符合该项标准评价对象’

image.png
image.png
image.png

1.html引入

   <div class="row cl">
         <label class="form-label col-xs-3 col-sm-2"> 评价对象
                   <span class="c-red">*</span>
         </label>
         <div class="formControls col-xs-8 col-sm-8">
                    <span class="select-box radius col-sm-5" style="width:40%;height: 31px;">
                        <!-- 企业列表下拉框 -->
                        <select class=" chosen-select companyList"  name="companyList" style="font-size: 14px;border: none;"></select>
                    </span>
                    <span class="select-box radius targetIdContent col-sm-5 col-sm-offset-1 hide" style="width:40%;height: 31px;">
                        <!-- 评价对象下拉框 -->
                         <select class="select chosen-select targetLi"  name="gradeWays"></select>
                    </span>
                    <input type="hidden" class="companyId">
          </div>
    </div>

    <link href="../../assets/chosen/chosen.css" rel="stylesheet">
    <script src="../../assets/chosen/chosen.jquery.min.js"></script>
    <!-- 模板获取企业下拉框列表 -->
    <script src="../../assets/template.js"></script>

//html底部js引入
    <!-- 评价对象选择时-先选择企业 企业列表的获取 用template实现 -->
    <script type="text/template7" id="companyListTemplate">
        <option value="">请选择企业</option>
        {{each data value i}}
        <option value="{{value.id}}">{{value.companyName}}</option>
        {{/each}}
    </script>
    <script type="text/javascript">
        $(function () {
            companyList();//获取企业下拉列表
            //下拉框带搜索
            $('.chosen-select').chosen({
                allow_single_deselect: true,
                search_contains: true,//搜索不是从开头搜索，而是包含搜索
            });
            //resize the chosen on window resize
            $(window).off('resize.chosen').on('resize.chosen', function () {
                $('.chosen-select').each(function () {
                    var $this = $(this);
                    $this.next().css({
                        'width': $this.parent().width()
                    });
                })
            }).trigger('resize.chosen');
        })
    </script>

2.js

   // 企业的获取列表
    function companyList(){
        $.ajax({
            url: basePath + "/companyList",
            type: "POST",
            dataType: "json",
            success: function (response) {
                if (response.status) {
                    var html = template('companyListTemplate', response)
                    $('.companyList').html(html)
                    chose_set_ini($(".companyList"), 0);//企业下拉框带搜索
                    $(".companyList").on('change', function(event){
                      //从下拉框选择企业时，获取评价对象列表
                        var companyId=$(this).val();
                        $('.companyId').val(companyId)
                         getTargetList(companyId)
                    });
                }
            }
        });
    }
    //评价对象获取列表
    function getTargetList(companyId){
        $.ajax({
            url: basePath + '/targetList',
            type: 'post',
            data:{
                companyId:companyId,
            },
            dataType: "json",
            success: function (response) {
                if (response.status) {
                    if(response.data.length>0){//如果评价对象过去列表有值
                         //销毁select后列表有值，再给.targetIdContent添加select
                        $('.targetIdContent').html('<select class="select chosen-select targetLi"  name="gradeWays"></select>')
                        var html = '<option value="">请选择评价对象</option>'
                        for(var i=0;i<response.data.length;i++){
                            html +='<option  value="'+response.data[i].id+'" index="'+i+'" >'+response.data[i].name+'</option>'
                        }
                        $('.targetLi').html(html)
                        chose_set_ini($(".targetLi"), 0);//评价对象下拉框带搜索
                    }else{//如果评价对象过去列表没数据，提示信息“无符合该项标准评价对象”
                        /*销毁select 清除评价对象下拉列表的option，和已选择的option，
                        如果不销毁会导致在企业切换时，评价对象由有数据切换至无列表数据时，虽然提示了“无符合该项标准评价对象”，
                        点击下拉仍然会出现之前的数据*/
                        $('.targetLi').chosen("destroy")
                        $('.targetIdContent').html('<p style="color:red">无符合该项标准评价对象</p>')
                    }
                } else {
                    layer.msg(response.message, {icon: 5,time:2000});
                }
            }
        });
    }
    //下拉框带搜索
    function chose_set_ini(select, value) {
        $(select).val(value);
        $(select).trigger("chosen:updated");
    }