UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

jQuery下拉箭头样式 简单实用（原创）

所属分类：输入-选择框

 41896  340  查看评论 (15)
分享到微信朋友圈
X
jQuery下拉箭头样式 简单实用（原创） ie兼容9
 查看演示  立即下载

更新时间：2017/8/9 上午12:42:27

更新说明：减少代码量，优化代码，是插件运行更快，更轻便

使用方法

在使用之前先引入css，js  文件

<link rel="stylesheet" type="text/css" href="./js/M_select/M_select.css">
<script src="./js/M_select/M_select.min.js"></script>

在每一个原生的 select 外围设置一个 div 包裹住（初始化之后的select宽度为div的宽度）

<div style="display:inline-block;width: 150px;">
    <select class="select01">
	<option value="01">第一个下拉</option>
	<option value="02">第二个下拉第二个下拉第二个下拉第二个下拉</option>
	<option value="03">第三个下拉</option>
    </select>
</div>

进行初始化

$(".select01").M_select();

也可以利用 json  进行 M_select_init(selectList);

M_select_init(selectList);

// selectList 为 json对象

插件参数

$(".select01").M_select({
    "ico":"1",// ico的值可以为1-5 有五个样式的下拉箭头，如果想自己定义箭头样式，可以使用img，img2 传参
    // 手动添加下拉框箭头图片（以html页面为起始位置写路径）
    // "Img":"./js/M_select/up4.png",
    // "Img2":"./js/M_select/down1.png",
    "Title":"--下拉款的标题--",//定义为选择前的下拉框显示文档
    "radius":"10px",//定义圆角属性
    "inputName":"selected_value",//这里的inputName可以定义隐藏的input的name，通过name获取它的value的值（value的值为选中的下拉的value值，默认值为sel_v）			
    "selected":"03",//选择select初始的选择状态，相当于selected，03为下拉框的value的值
    Succee:function(){
	alert("选择下拉之后的弹窗");
    }//选择选项之后的回调函数
});

可以给原生的select 添加 disabled=true 让select不可选

<div style="display:inline-block;width: 200px;">
	<select class="select02">
		<option value="01">第一个下拉</option>
		<option value="02" disabled=true>第二个下拉</option>
		<option value="03">第三个下拉</option>
	</select>
</div>

新手初次练手，有什么好的建议和不足希望大家反馈下，评论交流

相关插件-选择框
查看更多

强大的下拉框美化插件

 Select2是一款基于jQuery的专门针对下拉框的美化插件
  选择框
 53404  350

jQuery城市下拉选择

 jQuery下拉方式选择城市,带搜索、单选、多选。
  选择框
 52482  371

移动端城市搜索选择(原创)

 原创，代码简单易修改。类仿大众点评选择城市的部分，只是部分不必要功能没有。有备注！json可修改！
  选择框
 26767  324

div模拟下拉省市级联三级联动附带地区数据(原创)

 带地区代码，兼容到ie8；浏览器样式统一，下拉图标可自行更换，根据隐藏input value值获取地区代码
  选择框
 30021  327

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

    瓜哥 0
    2023/10/26 17:53:38
    没有重置select的方法吗？ 回复
    Shylock 0
    2020/6/27 16:52:24

    动态生成的div select标签。怎么调用啊

    <div style="display:inline-block;width: 150px;">
    <select class="select01" onclick="changeSelect(<%=i%>)">
            <%for(var b=0; b<data[i].option.length;b++){%>
                    <option  value="<%=data[i].option[b].value%>"><%=data[i].option[b].value%></option>
            <%}%>                             
    </select>
</div>

    就这种情况

    回复
    == 0
    2020/4/14 16:34:03
    有bug，第二次选相同的通过$('.select03').val()获取的值与显示的不一致
        南1
        2020/6/1 11:27:37
        自测是没问题的，你否是用了text 不同，value 却相同的对象数组，按照示例来渲染页面，插件是正常的，方便的话可以提供代码上来看
    回复
    ◤Sherry＂ 0
    2018/11/16 9:50:32
    谢谢！！！就是想要这种的，居然还是免费的~~~开心 回复
    Sylvia?L 0
    2018/8/10 9:49:04
    您好 如果想两个select联动的话应该怎么做
        南0
        2018/10/16 16:43:42
        暂时还没做联动，只能手动自己写js控制联动
    回复
    苦瓜 0
    2017/10/25 13:40:11
    jessesho 0
    2017/9/11 13:14:55
    如果动态改变option 的数量之后应该怎么初始化？
        南0
        2017/10/13 18:34:20

        可以先获取保存在删除下拉，在复原select的原始结构再重新初始化

        南1
        2017/10/13 18:36:02

        先保存option，再删除初始化的select，再重新复原select的结构，再初始化，比较麻烦，之后会考虑添加这个方法

    回复
    jessesho 0
    2017/9/6 10:12:03

    正好和我要写的样式很相似 谢谢啦

    回复
    我又不乱来 0
    2017/5/12 15:08:36

    js在哪？

        我又不乱来0
        2017/5/12 15:09:26

        看到了   不好意思    图片太多 没注意看

        南0
        2017/5/15 15:51:43

        恩恩  有什么问题欢迎随时来反馈

    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复