jQuery下拉箭头样式 简单实用(原创)

所属分类:输入-选择框

 6434  31  查看评论 (8)
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>

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

相关插件-选择框

js省市县三级联动

js省市县三级联动和别的省市联动插件相比,此插件省市数据处理的要小很多
  选择框
 5177  19

允许自动检索的下拉框

可以进行自定义的选择
  选择框
 6966  34

jQuery简单的列表选择器

使用jQuery插件实现左右列表项的选择功能
  选择框
 7213  62

jQuery自定义下拉框插件dropDown.js

自定义下拉框包括2中状态(兼容ie8以上以及主流浏览器)
  选择框
 4458  14

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

    苦瓜 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

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

    回复
取消回复