下拉控件之Select2的使用案例

最新推荐文章于 2022-09-23 17:53:24 发布

原创最新推荐文章于 2022-09-23 17:53:24 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何利用Select2库提升网页中下拉选择框的功能性和用户体验，通过引入jQuery和Select2库，实现了多选功能，并预设了'珠海'作为默认选项。

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />  
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>  


<span>区域：</span>  
<select id="area" class="js-example-basic-multiple" name="states[]" multiple="multiple">  
    <option value="">请选择区域</option>  
    <option value="1" selected="selected">珠海</option>  
    <option value="2">深圳</option>  
    <option value="3">澳门</option>  
    <option value="4">香港</option>  
</select>  


<script type="text/javascript">  
    //页面加载完成后初始化select2控件  
    $(function () {  
        $(".js-example-basic-multiple").select2();  
    });  
</script>