自定义select模拟--基于jQuery

 

说明

模拟select，实现原生select不能实现的样式

将html结构入在Html页面中，css,js做分离

开发人员引用只要引入相关文件，并$().selectbox()就可转换样式，有更新时selectbox下，不会生成重复的html，不会重复绑定事件

selectbox唯一的参数是当html结构的script不是J_SelectBoxHtml时，传入script的expr

支持ie6-10,ff,chrome,safari,opera

支持select项

支持select的optgroup项

支持select的change事件

支持select的change规则，值未变化时不触发change，值变化时才触发。

增加select的change规则，select上加入data-change="click"属性时，无论值变化与否，都触发change事件

支持select的disalbed属性

与select等宽

支持select边界控制

html结构示例

<span class="select_box" style="z-index:100;">
	<%= SELECT %>//隐藏的select位置
	//选中项的显示
	<span class="select_up"><span class="select_up_text"></span><b></b></span>
	//下拉框
	<span class="select_list" style="display:none;">
		//option
		<a href="javascript:;" data-value="{{value}}">{{text}}</a>
		<a href="javascript:;" data-group="J_Group2">{{text}}<b class="icon" /></a>
		//optgroup
		<div class="erji J_Group2" style="display:none;">
			//optgroup 中的option
			<a href="javascript:;" data-value="{{value}}">{{text}}</a>
			<a href="javascript:;" data-value="{{value}}">{{text}}</a>
		</div>
	</span>
</span>

script中html形式

<script type="text/selectbox" id="J_SelectBoxHtml">
//select容器
<%WRAP%><span class="select_box" style="z-index:100;"></span><%/WRAP%>
//select兄弟
<% BODY %><span class="select_up"><span class="select_up_text"></span><b></b></span><span class="select_list" style="display:none;"></span><% /BODY %>
//option项
<% OPTION %><a href="javascript:;" data-value="{{value}}">{{text}}</a><% /OPTION %>
//optgroup项label，可选
<% GROUPLABEl %><a href="javascript:;" data-group="J_Group{{index}}">{{text}}<b class="icon" /></a><% /GROUPLABEl %>
//optgroup容器，可选
<% GROUPWRAP %><div class="erji J_Group{{index}}" style="display:none;"><%= OPTION %></div><% /GROUPWRAP %>
</script>

Demo

Demo下载地址

 

 

 

标签: js, custom select, jquery, 自定义select样式, selectbox