Jquery 插件 chosen_v1.8.7 下拉复选框带搜索功能

时间：2023-03-09 08:39:05
Jquery 插件 chosen_v1.8.7 下拉复选框带搜索功能

地址：https://harvesthq.github.io/chosen/

效果：Jquery 插件 chosen_v1.8.7 下拉复选框带搜索功能

因为只需要这个功能，就只研究这个功能了，代码：

<!doctype html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title>

<!--         <link rel="stylesheet" href="docsupport/style.css"> -->

    <!--      <link rel="stylesheet" href="docsupport/prism.css"> -->

        <link rel="stylesheet" href="chosen.css">

        <meta http-equiv="Content-Security-Policy" content="default-src &apos;self&apos;; script-src &apos;self&apos; https://ajax.googleapis.com; style-src &apos;self&apos;; img-src &apos;self&apos; data:">

    </head>

    <body>

        <form>

                            <em>Into This</em>

                            <select data-placeholder="Choose a Country..." class="chosen-select" multiple tabindex="4">

                                <option value=""></option>

                                <option value="United States">United States</option>

                                <option value="United Kingdom">United Kingdom</option>

                                <option value="Afghanistan">Afghanistan</option>

                                <option value="Aland Islands">Aland Islands</option>

                                <option value="Albania">Albania</option>

                                <option value="Algeria">Algeria</option>

                                <option value="American Samoa">American Samoa</option>

                                <option value="Andorra">Andorra</option>

                                <option value="Angola">Angola</option>

                            </select>

            <script src="docsupport/jquery-3.2.1.min.js" type="text/javascript"></script>

            <script src="chosen.jquery.js" type="text/javascript"></script>

            <script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script>

            <script src="docsupport/init.js" type="text/javascript" charset="utf-8"></script>

        </form>

    </body>

</html>

以上js和css都要引入才可以

如果select的option是动态生成的 如：

    function getzhr() {

        jQuery.support.cors = true;//ie请求数据

        $.ajax({

            url:‘’',

            type: 'post',

            async: true,

            data: {},

            dataType: 'json',

            success: function (res) {

                if (!res['MSG']) {

                    tbzhr = res['data'];

                   if(!tbzhr){}

                   else{

                       var zhroption='';

                       $(".chosen-select").html("");

                       for(var i=0;i<tbzhr.length;i++){

                           zhroption+='<option value="'+tbzhr[i]['name']+'">'+tbzhr[i]['name']+'</option>';

                       }

                       $(".chosen-select").append(zhroption);

                 $(".chosen-select").trigger("chosen:updated");
$(".chosen-container").attr("style"," min-width: 400px;max-width:550px;");

                   }

                }

            },

            error: function (res) {

            }

        });

    }

因为引入了以后发现生成的宽度始终是0，所以加载完了以后重新设置了宽度（注意如果需要图标，需要修改chosen.css 对应图标路径）：

如果select是动态生成的，



$(".chosen-select").chosen();//需要先初始化
$(".chosen-select").append(zhroption) ；//然后再赋值
$(".chosen-select").trigger("chosen:updated");
$(".chosen-container").attr("style", " width:100%");


 


相关文章