下拉框插件select2的使用

举报
lxw1844912514 发表于 2022/03/28 23:58:18 2022/03/28
1.5k+ 0 0
【摘要】 它的优点有: 样式还算好看,支持多选,支持索搜 下面来介绍下select2的用法 1.最简单的用法 只需要加载css和js即可使用 <select name="" id="test" style="width: 100px;"> <option value="0"&gt...

它的优点有:
样式还算好看,支持多选,支持索搜
下面来介绍下select2的用法

1.最简单的用法
只需要加载css和js即可使用


         <select name="" id="test" style="width: 100px;">
                 <option value="0">java</option>
                 <option value="1">c</option>
                 <option value="2">php</option>
                 <option value="3">python</option>
                 <option value="4">javascript</option>
             </select>
             <script type="text/javascript">
                 $("#test").select2();
             </script>
     
    

再来张效果图


 
图片.png

注意:这个 放大镜(搜索图)需要放在和css,js同级

2.支持多选
加上一个 multiple='mutiple'的属性就好了


          <select name="" id="test" style="width: 200px;" name="states[]" multiple="multiple">
                 <option value="0">java</option>
                 <option value="1">c</option>
                 <option value="2">php</option>
                 <option value="3">python</option>
                 <option value="4">javascript</option>
             </select>
     
    
 
图片.png

3.国际化(多语言)
默认是英文的提示
我们需要引入中文js
然后


          $("#test").select2({
                     language: "zh-CN"
                 });
     
    

完整代码


         <!doctype html>
         <html lang="en">
         <head>
             <meta charset="UTF-8">
             <title>select</title>
             <link rel="stylesheet" href="select2/select2.css">
             <script type="text/javascript" src="jquery-1.11.3.js"></script>
             <script src="select2/select2.js"></script>
             <script type="text/javascript" src="select2/select2_locale_zh-CN.js"></script>
         </head>
         <body>
             <select name="" id="test" style="width: 200px;" name="states[]" multiple="multiple">
                 <option value="0">java</option>
                 <option value="1">c</option>
                 <option value="2">php</option>
                 <option value="3">python</option>
                 <option value="4">javascript</option>
             </select>
             <script type="text/javascript">
                 $("#test").select2({
                     language: "zh-CN"
                 });
             </script>
         </body>
         </html>
     
    
 
图片.png

3.默认赋值

 $("#test").val([1,2,3]).trigger('change');

    

  

这样给select赋值,支持多项



链接:https://www.jianshu.com/p/60831ea22a1b

文章来源: blog.csdn.net,作者:lxw1844912514,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/lxw1844912514/article/details/100029407

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论(0

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。