jquery combines CSS to make beautiful select Pull-down menu _jquery

When we are designing a form, we may want to use the Select Drop-down option control, but unfortunately, the default select control of IE browser looks very ugly, and cannot be controlled by styles, and can not be added to the options for information such as pictures. Today I'll explain how to use CSS and jquery to make beautiful drop-down menu choices.

Xhtml

<div id= "dropdown" > 
  <p> Please select City </p> 
  <ul> 
    <li><a href= "#" > Changsha </a ></li> 
    <li><a href= "#" > Beijing </a></li> 
    <li><a href= "#" > Nanjing </a ></li> 
    <li><a href= "#" > Canberra </a></li> 
    <li><a href= "#" > Toronto < /a></li> 
  </ul> 
</div> 

As you can see, we use DIV to replace the Drop-down option control's native select label.
Css

#dropdown {width:186px; margin:80px auto; position:relative} 
#dropdown p{width:150px; height:24px; line-height : 24px; padding-left:4px; padding-right:30px; 
border:1px solid #a9c9e2; Background: #e8f5fe URL (arrow.gif) no-repeat right 4px; 
Color: #807a62; Cursor:pointer} 
#dropdown ul{width:184px; background: #e8f5fe; margin-top:2px; border:1px solid #a9c9e2; 
Position:absolute; Display:none} 
#dropdown ul li{height:24px; line-height:24px text-indent:10px} 
#dropdown ul li A{display: Block height:24px; Color: #807a62; Text-decoration:none} 
#dropdown ul li a:hover{background: #c6dbfc; color: #369} 

Style not to speak more, you can modify the background color and font color in CSS, and even any other defined style. There is a small icon with a drop-down arrow that has been packaged in the attachment.
Jquery
First, when you click Select City, determine if the Drop-down layer "UL" is in the display state, and if so, hide the drop-down option, or open (slide down) the Drop-down option

$ ("#dropdown p"). Click (function () { 
  var ul = $ ("#dropdown ul"); 
  if (Ul.css ("display") = = "None") { 
    Ul.slidedown ("fast"); 
  } else{ 
    ul.slideup ("fast"); 
  } 
); 

Then, when you click the Drop-down option, get the option contents, write the contents of the options to the <p> tab, and hide the Drop-down options.

$ ("#dropdown ul li a"). Click (function () { 
  var txt = $ (this). text (); 
  $ ("#dropdown p"). html (TXT); 
  $ ("#dropdown ul"). Hide (); 
}; 

This completes a simple drop-down option operation, is not very simple AH.
Of course, if you interact with the background and you need to get the value of the option, you need to define XHTML first.

<div id= "dropdown" > 
  <p> Please select City </p> 
  <ul> 
    <li><a href= "#" rel= "1" > Changsha </a></li> 
    <li><a href= "#" rel= "2" > Beijing </a></li> 
    <li><a href= "# "Rel=" 3 "> Nanjing </a></li> 
    <li><a href=" # "rel=" 4 "> Canberra </a></li> 
    <li ><a href= "#" rel= "5" > Toronto </a></li> 
  </ul> 
</div> 
<div id= "Result" ></div> 

As you can see from the code, adding a rel attribute to a label and assigning it is equivalent to the value of the option label for SELECT. The next step is to get the Rel value through jquery, see the code:

$ ("#dropdown ul li a"). Click (function () { 
  var txt = $ (this). text (); 
  $ ("#dropdown p"). html (TXT); 
  var value = $ (this). attr ("rel"); 
  $ ("#dropdown ul"). Hide (); 
  $ ("#result"). HTML ("You have selected" +txt+ ", the value is:" +value); 
 

This completes the operation of a complete drop-down option.

The above mentioned is the entire content of this article, I hope you can enjoy.