Custom select simulation-based on jQuery

Description

Simulate select to implement styles not implemented by native select

Add the html structure to the Html page, and separate css and js.

The developer can introduce the relevant file and convert the style with $ (). selectbox (). When there is an update, the selectbox will not generate duplicate html and will not rebind events.

The unique parameter of selectbox is that when the script in the html structure is not J_SelectBoxHtml, the expr of the script is passed in.

Support for ie6-10, ff, chrome, safari, opera

Supports select items

Optgroup items supporting select

Select change events are supported.

The select change rule is supported. If the value is not changed, the change rule is not triggered. If the value is changed, the change rule is triggered.

Add the select change rule. When the data-change = "click" attribute is added to the select statement, the change event is triggered regardless of whether the value changes or not.

The disalbed attribute of select is supported.

Equal to select

Supports select Boundary Control

Html structure example

<Span class = "select_box" <script type = "text/selectbox" id = "J_SelectBoxHtml"> // select container <% WRAP %> <span class = "select_box" style = "z-index: 100; "> </span> <%/WRAP %> // select sibling <% BODY %> <span class =" select_up "> <span class =" select_up_text "> </span> <B> </span> <span class = "select_list" style = "display: none; "> </span> <%/BODY %> // option item <% OPTION %> <a href =" javascript :; "data-value =" {value }}" >{{ text }}</a> <%/OPTION %> // optgroup item label, optional <% GROUPLABEl %> <a href = "javascript :; "data-group =" J_Group {index} ">{{ text }}< B class =" icon "/> </a> <%/GROUPLABEl %> // optgroup container, optional <% GROUPWRAP %> <div class = "erji J_Group {index}" style = "display: none; "> <% = OPTION %> </div> <%/GROUPWRAP %> </script>

Demo

Demo