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 //多选点击确定时出发事件方法

相关插件-选择框

jQuery地区插件带搜索功能

根据网友代码,调整了样式,并优化了部分显示,新增了搜索功能
  选择框
 7690  58

仿招聘网站选择地区、选择行业、选择职位效果

仿招聘网站选择地区、选择行业、选择职位效果
  选择框
 24074  85

jQuery下拉框多选

下拉字母多选框
  选择框
 10672  33

JCheck表单选择

自定义样式的单选和复选的小插件,基于jQuery。
  选择框
 7262  34

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

    萧寒 0
    2017/11/19 14:56:34

    定义一个按钮,单击事获取

    function getSelectVal(){
    	var res = $('.newSelectTitle>span').html();
    	alert(res);
    }
    回复
    Illidan Stmrage 0
    2017/11/9 13:25:52

    怎么添加复选框这种呢

        pohuaijk0
        2017/11/19 15:53:33

        不太懂你的意思

    回复
    0
    2017/11/8 11:14:43
    0
    2017/10/31 11:00:26

    后台取不到值啊,多选的时候不管选什么都是只能取到第一个值,我看了也挺多人问这个问题的,希望楼主能帮忙解答下

        pohuaijk1
        2017/11/19 15:51:40

        当时只是考虑了提交表单时使用AJAX将待处理数据做成JSON格式时做的,直接提交表单情况下使用多选框还需要将复选框的数据单独获取进行处理。意思就是重新增加一个提交事件,然后获取表单数据、处理、提交

    回复
    F 0
    2017/9/26 18:36:01
    当select的val值发生变化是触发onchange事件怎么实现,你span标签内会显得的值和select的val不是同步变换的
        pohuaijk0
        2017/10/19 11:26:09

        onchange就是新select的change事件,还有第二个问题没看懂

    回复
    淤青 0
    2017/7/13 17:04:10

    怎么获取当前选择的值?

    回复
    我养的小猫 0
    2017/7/9 15:02:43

    多选的值,怎么传到后台啊,后台接受到的只有一个

        pohuaijk0
        2017/7/19 17:30:46

        需要手动获取

    回复
    不知足的现代 0
    2017/6/14 15:09:02

    怎么样?好用吗

    回复
    - H° 0
    2017/6/6 17:30:34

    怎么查获取的值呢

        pohuaijk0
        2017/6/6 17:36:17

        data-select="true"是选中的选项,设置默认值也是用这个,先设置默认值再初始化

    回复
    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左右。

    回复
取消回复