Implement special effects of drop-down box beautification and jquery drop-down Box Based on jquery

Implement special effects of drop-down box beautification and jquery drop-down Box Based on jquery

We usually use the native select drop-down box, and most of the styles cannot be modified. As a result, the style in different browsers will be different from that in the design drawing. In order to beautify it, JQ is used to simulate a drop-down box and the style can be customized at will. The native drop-down box is also hidden in the div to facilitate background developers to operate on it.

As follows:

The HTML code is as follows:

<! DOCTYPE html> 
The CSS style is as follows:

@ Charset "UTF-8";/* simple reset */body, ul, li {margin: 0; padding: 0 ;}body {font: 14px/24px Microsoft YaHei; color: #333;} ul {list-style: none;} a {color: #333; outline: none; text-decoration: none;} table {border-collapse: collapse; border-spacing: 0; text-align: left;}/* layout style, not required */. wrap {width: 600px; margin: 100px auto 0; padding: 20px; background-color: # d3f3dd ;}. wrap table th ,. wrap table td {padding: 8px 2px ;}. wrap table th {font-weight: normal; text-align: right;}/* the drop-down box style must be */. select-style ul {list-style: none; padding: 0; margin: 0 ;}. select-style select {display: none ;}. select-style {position: relative; display: inline-block; font-family: Microsoft YaHei; color: #666; font-size: 14px; text-align: left; vertical-align: middle; z-index: 50 ;}. the select-style.focus {z-index: 51 ;}. select-style. slt-wrap {display: inline-block; width: 200px; border: solid 1px # d6d6d6; vertical-align: middle ;}. select-style.focus. slt-wrap {border: solid 1px # 53a8df ;}. select-style. slt-title {position: relative; display: block; padding: 0 36px 0 5px; line-height: 30px; height: 30px; text-decoration: none; background-color: # fff; word-break: break-all; color: #666; overflow: hidden ;}. select-style. slt-title. slt-text {display: inline-block; height: 30px; * cursor: pointer ;}. select-style. slt-title I {position: absolute; right: 0; top: 0; display: inline-block; width: 30px; height: 30px; background: url (.. /images/ico-select.png) 0 0 no-repeat; * cursor: pointer ;}. select-style.focus. slt-title I {background-position: 0-30px ;}. select-style.disabled. slt-title I {background-position: 0-60px; * cursor: default ;}. select-style. UDF-box {display: none; position: absolute; left: 0; top: 31px; width: 100% ;}. select-style.up. UDF-box {top: auto; bottom: 31px ;}. select-style. UDF-box. fig-list {position: relative; _ width: 100%; max-height: 130px; border: 1px solid # d6d6d6; background: # fff; overflow-y: auto; overflow-x: hidden ;}. select-style.focus. UDF-box. UDF-list {border-color: # 53a8df ;}. select-style. UDF-box. -list li {display: block; _ width: 100%; padding-left: 5px; line-height: 26px; height: 26px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer ;}. select-style. UDF-box. UDF-list. selected {background: # d4edfe ;}. select-style. UDF-box. opn-list li: hover {color: # fff; background: #65 abda ;}. select-style. UDF-box. opn-list li. disabled {color: # cacaca; background: # f0f0f0; cursor: default ;}. select-style.disabled. slt-wrap {border: 1px solid # d6d6d6 ;}. select-style.disabled. slt-title {color: # cacaca; background-color: # f0f0f0; cursor: default ;}. select-style.disabled. slt-title. slt-text {* cursor: default;}/* drop-down box style ends */
The Jquery code is as follows:

/*** Name: beautify the drop-down box **/(function (jQuery) {$. fn. simSelect = function (o) {o = $. extend ({// set the default parameter maxNum: 5, // display up to 5 width: 200, // The default width is PX. To avoid setting too much width, set the css style according to the most common width in the project. Direction: "down", // pull down, and the other is up disabled: false // true when unavailable}, o ||{}); return this. each (function () {// construction start if ($ (this ). children (". slt-wrap ") {// repeat $ (this ). children (". slt-wrap "). remove () ;}; var $ ts =$ (this), $ select = $ ts. find ("select "). eq (0), wid = parseFloat ($ ts. attr ("width"), num = parseFloat ($ ts. attr ("max-num"), $ sltWrap =$ ("<div class = 'slt-wrap'> </div> "). prependTo ($ ts), $ sltTit = $ ("<a class = 'slt-title' hidefocus = 'true' href = 'javascript: void (0 ); '> <span class = 'slt-text'> </span> <I> </a> "). prependTo ($ sltWrap), $ sltText = $ (". slt-text ", $ sltTit ), $ opnBox = $ ("<div class = 'opn-box'> <ul class = 'opn-list'> </ul> </div> "). appendTo ($ sltWrap), $ opnList = $ (". opn-list ", $ opnBox); $ ts. addClass ("select-style"); // Add a class for writing css styles with $ select. find ("option "). each (function (I) {// cyclically generate the li label var text =$ (this ). text (), $ li = $ ("<li title = '" + text + "'>" + text + "</li> "). appendTo ($ opnList); if (this. selected) {$ li. addClass ("selected"); $ sltText. text (text ). attr ("title", text) ;}; if (this. disabled) {$ li. addClass ("disabled"); return ;}}); var $ li =$ ("li", $ opnList), hei = $ li. height (); if (wid) {// set the width of $ts.css ("width", wid + "px"); // compatible with IE6 and 7 $sltWrap.css ("width ", wid-2 + "px");} else {$ts.css ("width", o. width + "px"); // compatible with IE6 and 7 protocol sltwrap.css ("width", o. width-2 + "px") ;}; if (num) {// set the height of opnlist.css ("max-height", hei * num + "px ");} else {javasopnlist.css ("max-height", hei * o. maxNum + "px") ;}; if (o. direction = "up") {// set up and drop-down directions $ ts. addClass ("up") ;}; $ li. on ("click", function () {// click Event of the li tag, passed to native select var index = $ opnList. find ("li "). index (this), text = $ (this ). text (); if ($ (this ). hasClass ("disabled") {return false ;}; $ (this ). addClass ("selected "). siblings (). removeClass ("selected"); $ select. find ("option "). prop ("selected", false ). eq (index ). prop ("selected", true); $ sltText. text (text ). attr ("title", text); $ opnBox. hide (); $ ts. removeClass ("focus") ;}; $ sltTit. on ("click", function (e) {// click the drop-down event e. stopPropagation (); // prevents the click bubble if ($ opnBox. is (": hidden") {$ (". select-style. opn-box "). hide (); $ (". select-style "). removeClass ("focus"); $ opnBox. show (); $ ts. addClass ("focus");} else {$ opnBox. hide (); $ ts. removeClass ("focus") ;}}); $ select. on ("change", function () {// Click Event of native select, passed to ul var index =$ (this ). find ("option: selected "). index (), text = $ li. eq (index ). text (); $ li. eq (index ). addClass ("selected "). siblings (). removeClass ("selected"); $ sltText. text (text ). attr ("title", text) ;}; $ (document ). on ("click", function (e) {// click another place to collapse the drop-down box if ($ opnBox. is (": visible") {$ opnBox. hide (); $ ts. removeClass ("focus") ;}}); if ($ select. prop ("disabled") = true | o. disabled = true | $ ts. hasClass ("disabled") {$ sltTit. off ("click"); // sets the disabled state $ select. prop ("disabled", true); $ ts. addClass ("disabled") ;};};}}) (jQuery );
Compatible with IE7 + (IE6 is actually good, but the scroll bar will not appear if there are more than five options ).
The above is all the content of this article, hoping to help you learn.
Articles you may be interested in:

 

 
  
Jquery multiSelect multi-select drop-down box
 
  
Jquery-based webpage SELECT drop-down box beautification code
 
  
Implement value assignment in the drop-down list of Jquery operations
 
  
Use jQuery to implement a drop-down box that allows you to enter Search Text
 
  
Jquery and native js get the selected value example in the select drop-down box
 
  
Sample Code for jquery to dynamically load the select drop-down box
 
  
A simple jquery multi-choice drop-down box (self-writing)
 
  
JQuery creates provincial/municipal drop-down box linkages
 
  
How does jQuery operate the text and value values in the select drop-down box?
 
  
Jquery-based code for editable drop-down boxes
 
  
JQuery creates a simple multi-level linkage Select drop-down box