jQuery自定义select、单选、复选

所属分类:输入-选择框

jQuery自定义select、单选、复选 ie兼容10

更新时间:2017/5/6 上午11:39:43

更新说明:修复点击两个select不关闭的错误。


引入文件

<script src="js/jquery.js"></script>
<script src="js/select.jquery.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">

HTML

<select class="multiselect">
  <option value="">A</option>
  <option value="">B</option>
  <option value="">C</option>
  <option value="">D</option>
  <option value="">E</option>
  <option value="">F</option>
  <option value="">G</option>
</select>

调用

$('.multiselect').multiselect({})

参数

  • selectedHtmlValue //默认显示在select上的文字   

  • multiple //true为多选   false单选  默认为true

  • setWidth //设置select宽度    

  • setMaxOptionNum //最大显示option数    溢出部分出现滚动条

  • change //单选点击触发事件方法

  • mutiConfEvent //多选点击确定时出发事件方法

相关插件-选择框

vue2.0实现全选,全不选。

当单个选中所有时,全选自动变成全选状态;当全选后,取消其中一个,全选状态改变。
  选择框
 1470  13

Jquery实现角色左右选择特效

简单的jquery实现左右角色的互选功能
  选择框
 9247  52

jQuery移动端省市区三级联动选择框

仿淘宝移动端收货地址省市区的选择面板
  选择框
 5798  63

jQuery中国省市区地址三级联动插件Distpicker

distpicker是一款可以实现中国省市区地址三级联动jQuery插件。它使用简单,简单设置即可完成中国省市区地址联动效果。
  选择框
 43070  153

讨论这个项目(10)回答他人问题或分享插件使用方法奖励jQ币

    angyang2016 0
    2017/5/16 20:12:56

    你好,插件中貌似没有font-awesome/css/font-awesome.min.css这个文件夹?

        西瓜0
        2017/5/16 20:23:10

        直接引用

        <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">

        或其它cdn共公库提供的地址即可。如果就喜欢用自己本地地址,就那下载一套font-awesome字库了800K左右。

    回复
    珍藏的小板凳 0
    2017/5/12 10:14:23
    全程妞 0
    2017/5/9 15:07:34

    能否修改下,多选的情况下,点击某项时就代表选中,不用再点击确定按钮

        pohuaijk0
        2017/5/9 18:29:15
        也考虑过,但是mutiConfEvent事件就没法触发了
    回复
    徐浩进 0
    2017/5/8 22:25:45
    pohuaijk 0
    2017/5/4 20:38:05

    设置默认值方法为

    <select class="multiselect">
        <option>A</option>
        <option data-select="true">B</option>
        <option>C</option>
    <select>
    $('.multiselect').multiselect();
    回复
    快扶我写代码 0
    2017/5/4 15:38:04

     求分享 1149487592@qq.com

    回复
    独舞 0
    2017/5/3 17:17:05

    多选的这个input没有显示选中的数据

        pohuaijk0
        2017/5/3 20:08:20
        下拉菜单下面有个确定按钮,点了才会显示
    回复
取消回复