Simulated drop-down box code implemented with jQuery_jquery

Many group members have asked questions about the beautification of drop-down boxes. Now I will describe the production process of beautifying drop-down boxes. It is actually a simulated drop-down box.
Question 1: Why simulate a drop-down box?
1. The drop-down box style that comes with the browser is not good-looking.
2. Under IE6, the priority of the drop-down box is greater than that of the layer, which often causes the drop-down box to be displayed above the layer.
OK, after understanding this problem, we started to use jQuery to create a simulated drop-down box.

Step one: Build the structure first
This is the ordinary drop-down box code:
XML/HTML code

Copy code The code is as follows:

Option one
Option two
Option three
Option four
Option five
Option six

This is simulated:
XML/HTML code

Copy the code The code is as follows:

Option 1
< ;ul class="CRselectBoxOptions">

Option one< ;/li>

Option 2

Option 3

Option four

Option five

Option six< ;/li>

<title></title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <link rel="stylesheet" href="css/CRselectBox.css" type="text/css"> <h1 id="Build-the-structure-first">1. Build the structure first</h1> <select name="abc" id="abc"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option three</option> <option value="4">Option 4</option> <option value="5">Option 5</option> <option value="6">Option six</option> </select> VS <div class="CRselectBox"> <input type="hidden" value="" name="abc" id="abc"> </div>