How to use JavaScript to beautify the drop-down list of HTML select tags _ javascript skills

This article mainly introduces how to use JavaScript to beautify the drop-down list of HTML select tags, and improve compatibility with multiple browsers, you can refer to the following example to review the usage of the select Tag:

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 p for simulation.
Set select transparency to 0, and then add a p 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 p) based on the select option and hide it.
Create a p at the select position to 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 p, 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 p to select Value
Add an event so that the true select value is displayed on the simulated p.


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
 
  
'+ SetFixDivText ($ (select). val () +'
  
'); 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
 
  
'+ SetFixDivText ($ (select). val () +'
  
'); 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:

<HTML> <HEAD> <TITLE> New Document
 <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? 1.1.9 ">
 <Script type = text/javascript src = "temp. js? 1.1.9 ">
 <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 ;}
 
 <BODY> <p id = "main"> <select id = "sex" class = "selectInput" name = "sex"> <option value = "0"> male
 <Option value = "1"> female
 
 
 
 
    New Document