自制小清新select插件

所属分类:输入-选择框

 38811  385  查看评论 (20)
分享到微信朋友圈
X
自制小清新select插件 ie兼容9

html代码:

<html>
<head>
    <link href="/Content/select.css" rel="stylesheet" />
    <link href="/CSS/jquery.mCustomScrollbar.min.css" rel="stylesheet" />
</head>
<body>
        <select id="mySelect">
            <option value="1">成功1</option>
            <option value="2">成功2</option>
            <option value="3" selected="selected">成功3</option>
            <option value="4">成功4</option>
            <option value="5">失败5</option>
            <option value="6">失败6</option>
            <option value="7">失败7</option>
            <option value="8">失败8</option>
            <option value="9">失败9</option>
            <option value="10">失败10</option>
            <option value="11">失败11</option>
            <option value="12">失败12</option>
        </select>
</body>
</html>

jq代码:  

<script src="/JS/jquery-1.11.3.min.js"></script>
<script src="/JS/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="/JS/jquery.select.js"></script>
<script type="text/javascript">$(function() {
    // $("#mySelect").select(); 不传参数可以这样写
    $("#mySelect").select({
      width: "200px"
    });
    //可选参数,不填就是默认值
    //width: "180px",            //生成的select框宽度
    //listMaxHeight:"200px",     //生成的下拉列表最大高度
    //themeColor: "#00bb9c",    //主题颜色
    //fontColor: "#000",        //字体颜色
    //fontFamily: "'Helvetica Neue', arial, sans-serif",    //字体种类
    //fontSize:"15px",           //字体大小
    //showSearch: false,        //是否启用搜索框
    //rowColor:"#fff",          //行原本的颜色
    //rowHoverColor: "#0faf03", //移动选择时,每一行的hover底色
    //fontHoverColor: "#fff",   //移动选择时,每一行的字体hover颜色
    //mainContent: "请选择",    //选择显示框的默认文字
    //searchContent: "关键词搜索"   //搜索框的默认提示文字  
  });</script>

备注:js文件的引用顺序必须和示例一样,并且缺一不可


相关插件-选择框

移动端城市选择插件(原创)

基于Vue移动端城市选择插件
  选择框
 30428  327

双向选择表格(支持IE8及以上)

双向选择表格,支持自定义查询条件(支持下拉框)、自定义表头和数据格式(表格支持链接)、单选全选、选择事件、动态修改数据等功能,具体可以查看示例
  选择框
 18862  197

不包邮省市选择(不含县)

jQuery选择省市地区,支持多选,单独筛选
  选择框
 27966  344

jQuery仿淘宝商品选配

jQuery仿淘宝商品信息选配效果
  选择框
 31516  375

讨论这个项目(20)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ? Your Sun! 0
    2018/6/13 23:40:10
    纳闷事件监听不了 回复
    ?蓦然回首: 0
    2018/2/9 14:25:28
    简单 0
    2017/9/16 12:00:26

    可以进行多选吗

    回复
    张大帅 0
    2017/7/6 14:55:53
    sy135211 0
    2017/5/26 8:27:33
    能在安卓和ios上用吗? 回复
    上的发言,?? 0
    2017/5/25 17:06:24
    蓝昕 0
    2016/11/1 9:11:39
    请问可以多选吗? 回复
    疯子你好我是傻子 0
    2016/10/19 13:10:28
    怎样获取选择的值
        初、寂寞时光0
        2016/10/19 21:10:18
        QQ联系
    回复
    、小宝先森 0
    2016/10/10 17:10:51
    求下载啊  亲
        初、寂寞时光0
        2016/10/11 18:10:01
        QQ联系我
    回复
    最初的梦想? 0
    2016/9/29 23:09:24
    如果支持键盘上下就完美了 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复