Use JavaScript to beautify the drop-down list of HTML select tags. Use javascriptselect

Source: Internet
Author: User

Use JavaScript to beautify the drop-down list of HTML select tags. Use javascriptselect

First, let's review the usage of the select tag using an example:

The general effect is as follows:

For the moment, the "select" option among all the html elements is a poor choice. The main drive for him is:
 
Different browsers display different default drop-down boxes
You cannot manually set the select height in IE (this is the most boring !), Only supported by font-size
The drop-down arrow on the right of the select statement cannot be used to remove the background. As a result, css cannot be used for beautification.
To sum up, the solutions are as follows:

Hide select and use div for simulation.
Set select transparency to 0, and then add a div that looks similar to select and beautifies under the relative positioning.

The general principle of the hiding scheme is as follows:
Find the select to be processed on the page and hide it.
Create a li list (or div) based on select option and hide it.
Create a div at the select position and display the select value (select option ). And beautify it with css to make it look like a select
Add events so that the li list is displayed when you click "select. Use relative positioning to display the list below "select"
Add an event to the li list to simulate the value selection process in the drop-down box (click the event and keyboard crash events must be simulated)
After the selected value is complete, you need to display the selected value to the "select" above and set the true select value.
Of course, if you want to make it more complex, you can also add options to search, select multiple, and delete multiple options. At that time, the general principle was similar to above. There are also many such plug-ins on the Internet. However, when using plug-ins on the internet, you must test the compatibility of the browser. The more complex the function is to simulate select, the worse the compatibility is.
 
If your program does not need such a complex select statement, the second method to set transparency may be suitable for you. This solution is to be shared with you today.
The principle is as follows:
 
 
Find the select statement on the current page and set its transparency to 0 to make it invisible. However, you can click and select a value.
Create a div, use relative positioning, place it under select, and use css control to make it look like a select. Why must we put it below? In this way, we can click the real select, and the user looks like the simulated select, because the real select is completely transparent. If it is placed above, the user clicks the simulated select, and the real select will not be expanded !!!
Set text of div to select Value
Add the event so that the true select value is displayed on the simulated div.
 
 
Run the code first:
 

(Function ($) {var selectFix = function () {var select = $ (this ); // set the transparency to 0. Of course, you can also use css control. Using Jquery, you can set the transparency to block the access compatibility question (select}.css ({"opacity": 0 }); // find the select option var sOptions = this. get (0 ). options; // set the value var setFixDivText = function (selectValue) {var text = ""; for (var I = 0; I <sOptions. length; I ++) {var option = sOptions [I]; if (option. value = selectValue) {text = $ (option ). text (); break;} return text ;}; // simulate select // input the select value into var selectFixDiv =$ ('<div id = "J_selectFix _' + select. attr ("id") + '"class =" selectFix ">' + setFixDivText ($ (select ). val () + '</div>'); select. after (selectFixDiv); var left = $ (select ). offset (). left; var top = $ (select ). offset (). top-1; // because selecthas a side frame of 1 px, 1px1_(selectfixdiv).css ({"top": top, "left": left}) is pulled up here; // when selecting a value for select, display the value to the simulated select $ (select ). bind ("change click", function () {$ (selectFixDiv ). text (setFixDivText ($ (this ). val () ;};};$. fn. selectFix = selectFix;}) (jQuery );
(Function ($) {var selectFix = function () {var select = $ (this ); // set the transparency to 0. Of course, you can also use css control. Using Jquery to set the transparency can shield the browser compatibility problem of transparency (select).css ({"opacity": 0 }); // find the select option var sOptions = this. get (0 ). options; // set the value var setFixDivText = function (selectValue) {var text = ""; for (var I = 0; I <sOptions. length; I ++) {var option = sOptions [I]; if (option. value = selectValue) {text = $ (option ). text (); break;} return text ;}; // simulate select // input the select value into var selectFixDiv =$ ('<div id = "J_selectFix _' + select. attr ("id") + '"class =" selectFix ">' + setFixDivText ($ (select ). val () + '</div>'); select. after (selectFixDiv); var left = $ (select ). offset (). left; var top = $ (select ). offset (). top-1; // generally, select has a 1 px border, so here we pull up 1px border (selectfixdiv}.css ({"top": top, "left": left }); // when selecting a value, the value is displayed on the simulated select $ (select ). bind ("change click", function () {$ (selectFixDiv ). text (setFixDivText ($ (this ). val () ;};};$. fn. selectFix = selectFix;}) (jQuery );

 
 
Run the plug-in code:
 

jQuery(document).ready( function () {var selects=$( "select.selectInput" );if (selects.length){selects.each( function (){$( this ).selectFix();});}});jQuery(document).ready(function() {   var selects=$("select.selectInput");   if(selects.length){     selects.each(function(){       $(this).selectFix();     });   } }); 

The following is the html code:

<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta name = "Generator "CONTENT =" EditPlus "> <meta name =" Author "CONTENT =" "> <meta name =" Keywords "CONTENT =" "> <meta name =" Description "CONTENT = ""> <script type = text/javascript src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"> </script> <script Type = text/javascript src = "temp. js "> </script> <style> html {font-family:" "; font-size: 12px; line-height: 25px; color: # 6F6F6F ;}. dn {display: none;} select {cursor: pointer;} input, select, textarea ,. selectFix {background: white; border: 1px solid # E0E0E0; hide-focus: expression (this. hideFocus = true); outline: none ;}. formText ,. selectInput ,. text ,. selectFix {border: 1px solid # CCC; width: 180px; he Ight: 30px; line-height: 30px; padding: 0 3px ;}. selectInput {width: 248px; font-size: 13px; position: relative; z-index: 2 ;}. selectFix {width: 248px; background: url(selectBg.png) no-repeat; background-position: right; background-color: # fff; position: absolute; z-index: 1 ;} </style> </HEAD> <BODY> <div id = "main"> <select id = "sex" class = "selectInput" name = "sex"> <option value = "0"> male </op Tion> <option value = "1"> female </option> </select> </div> </BODY> </HTML> <! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta name = "Generator "CONTENT =" EditPlus "> <meta name =" Author "CONTENT =" "> <meta name =" Keywords "CONTENT =" "> <meta name =" Description "CONTENT = ""> <script type = text/javascript src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"> </script> <script type = text/javascript src = "temp. js "> </script> <style> html {font-family:" "; font-size: 12px; line-height: 25px; color: # 6F6F6F ;}. dn {display: none;} select {cursor: pointer;} input, select, textarea ,. selectFix {background: white; border: 1px solid # E0E0E0; hide-focus: expression (this. hideFocus = true); outline: none ;}. formText ,. selectInput ,. text ,. selectFix {border: 1px solid # CCC; width: 180px; height: 30px; line-height: 30px; padding: 0 3px ;}. selectInput {width: 248px; font-size: 13px; position: relative; z-index: 2 ;}. selectFix {width: 248px; background: url(selectBg.png) no-repeat; background-position: right; background-color: # fff; position: absolute; z-index: 1 ;} </style> </HEAD> <BODY> <div id = "main"> <select id = "sex" class = "selectInput" name = "sex"> <option value = "0"> male </option> <option value = "1"> female </option> </select> </div> </BODY> </HTML>

Compatible with mainstream browsers.
 
 
However, there is still a major defect. In the old version of ie, the true select height still cannot be opened. Therefore, if you click the lower part of the simulated select statement, the select statement cannot be expanded !!
However, the art of design lies in balancing. If you cannot bear this defect, you can use the first solution.
 
 
In addition, after the test, it is found that if the select statement is in a hidden container, the select position is blank after it is displayed !!
What's the problem ?!
It turns out that the screen coordinates of html elements cannot be obtained after they are hidden !!! So it is displayed at this time that the real select is completely transparent, and the simulated select goes to the upper left corner of the screen. Because he obtains the select coordinate (0, 0)
 
 
Don't worry. There are the following solutions to this problem:
1. Write Code separately to trigger the beautification program of select
First, you need to modify the above beautification program code as follows:
 

jQuery(document).ready( function () {var selects=$( "select.selectInput" );if (selects.length){selects.each( function (){if (!($( this ).attr( "autoFix" )== "false" )){$( this ).selectFix();}});}});jQuery(document).ready(function() {   var selects=$("select.selectInput");   if(selects.length){     selects.each(function(){       if(!($(this).attr("autoFix")=="false")){         $(this).selectFix();       }     });   } }); 

Then, add the property autoFix = "false" to the hidden select statement ":

<Select id = "sex" class = "selectInput" name = "sex" autoFix = "false"> <option value = "0"> male </option> <option value = "1"> female </option> </select> <select id = "sex" class = "selectInput" name = "sex" autoFix = "false"> <option value = "0"> male </option> <option value = "1"> female </option> </select>

Then, when the external container is displayed, manually call $ ("# sex"). selectFix ()
 
2. If the display or hide of a container is controlled by a third-party plug-in, consider the following solution:
In the beautification program, first determine whether select is hidden. If no logic remains the same, if hidden, add a timer to determine whether the elements are displayed cyclically, the fix is automatically called when it is displayed, and the timer is removed.
The Code is as follows:
 

// Add the operation to hide the select statement (function ($) {var selectFix = function () {var select = $ (this ); // set the transparency to 0. Of course, you can also use css control. Using Jquery, you can set the transparency to block the access compatibility question (select0000.css ({"opacity": 0}); if (! Select. is (": hidden") {var sOptions = this. get (0 ). options; var setFixDivText = function (selectValue) {var text = ""; for (var I = 0; I <sOptions. length; I ++) {var option = sOptions [I]; if (option. value = selectValue) {text = $ (option ). text (); break ;}} return text ;}; var selectFixDiv =$ ('<div id = "J_selectFix _' + select. attr ("id") + '"class =" selectFix "status =" close ">' + setFixDivText ($ (select ). val () + '</div>'); s Elect. after (selectFixDiv); var selectWidth = $ (select ). innerWidth (); var selectFixDivWidth = $ (selectFixDiv ). innerWidth (); var left = $ (select ). offset (). left; var topology(selectfixdiv}.offset().top-1}((selectfixdiv}.css ({"top": top, "left": left, "margin": 0}); $ (select ). bind ("change click", function () {$ (selectFixDiv ). text (setFixDivText ($ (this ). val () ;}) ;}else {var tasks = function () {if (! $ (Select ). is (": hidden") {$ (select ). selectFix (); clearInterval (timer) ;}}; var timer = setInterval (tasks, 500) };$. fn. selectFix = selectFix;}) (jQuery );
// Add the operation to hide the select statement (function ($) {var selectFix = function () {var select = $ (this ); // set the transparency to 0. Of course, you can also use css control. Using Jquery to set the transparency can shield the transparency of the browser compatibility problem (select).css ({"opacity": 0}); if (! Select. is (": hidden") {var sOptions = this. get (0 ). options; var setFixDivText = function (selectValue) {var text = ""; for (var I = 0; I <sOptions. length; I ++) {var option = sOptions [I]; if (option. value = selectValue) {text = $ (option ). text (); break ;}} return text ;}; var selectFixDiv =$ ('<div id = "J_selectFix _' + select. attr ("id") + '"class =" selectFix "status =" close ">' + setFixDivText ($ (select ). val () + '</div>'); select. a Fter (selectFixDiv); var selectWidth = $ (select ). innerWidth (); var selectFixDivWidth = $ (selectFixDiv ). innerWidth (); var left = $ (select ). offset (). left; var top = $ (select ). offset (). top-1; ((selectfixdiv).css ({"top": top, "left": left, "margin": 0}); $ (select ). bind ("change click", function () {$ (selectFixDiv ). text (setFixDivText ($ (this ). val () ;}) ;}else {var tasks = function () {if (! $ (Select ). is (": hidden") {$ (select ). selectFix (); clearInterval (timer) ;}}; var timer = setInterval (tasks, 500) };$. fn. selectFix = selectFix;}) (jQuery );

The Running code remains unchanged.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.