自制小清新select插件

所属分类:输入-选择框

 38119  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文件的引用顺序必须和示例一样,并且缺一不可


相关插件-选择框

jQuery世界地区三级联动

jQuery世界地区三级联动带搜索功能
  选择框
 43861  371

js城市查询器(完美仿携程)

高仿携程城市查询器在之前楼主版本上进行改进,添加了拼音简写索引,添加了字母标识与分割,简化了插件引入
  选择框
 47318  418

jQuery首字母搜索全国省市区插件

一款简单实用的响应式首字母搜索全国省市区插件适合手机页面和网站页面
  选择框
 23385  297

jQuery下拉框美化插件

jQuery自定义select下拉框美化插件
  选择框
 40571  362

讨论这个项目(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
    如果支持键盘上下就完美了 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复