jquery的select下拉框美化插件Chosen 使用

最新推荐文章于 2022-03-27 20:49:33 发布

weixin_34365417

最新推荐文章于 2022-03-27 20:49:33 发布

阅读量154

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/baishi/blog/155241

版权

为什么80%的码农都做不了架构师？>>>

首先引用相关的js和css:

<!--搜索下拉框插件-->
    <link href="css/chosen.css" rel="stylesheet" type="text/css" />
    <script src="js/chosen.jquery.js" type="text/javascript"></script>
    <link href="css/style.css" rel="stylesheet" type="text/css" />

接着在表单下拉选项中select引入样式和设置id

<div data-role="fieldcontain" >
            <label for="parentDistributorSelect">分销总店名称:</label>
            <select id="parentDistributorSelect" name="distributorId" data-role="none" class="chzn-select">
            <option value="-1">--空--</option>
            <c:forEach var="distributorInfo" items="${distributorInfoList}">
            <option value="${distributorInfo.id}">${distributorInfo.companyName}</option>
            </c:forEach>
            </select>
            </div>

(这里我用的是html5的动态下拉select),确定select的id和引入class

接着我们在script中初始化chosen插件：

//搜索下拉框初始化
            $(function () {
                $('#parentDistributorSelect').chosen({
                            width: "85%",
                            no_results_text:"没有找到",
                            allow_single_deselect:true
                        }
                );
            });

到此select的美化插件，并且带搜索功能完成。

后续有很多开发填坑的文章发布，如果对你有帮助，请支持和加关注一下

http://e22a.com/h.05ApkG?cv=AAKHZXVo&sm=339944

https://shop119727980.taobao.com/?spm=0.0.0.0

转载于:https://my.oschina.net/baishi/blog/155241