jQuery combines CSS to make beautiful select drop down menus

The select drop-down options control may be used in form design, but unfortunately, the default select control in the IE browser is ugly and cannot be styled to add information such as images to the options. Today I'll show you how to use CSS and jQuery to make beautiful drop-down menus with examples.

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="#"> In Canberra, </a></li> 
    <li><a href="#"> Toronto </a></li> 
  </ul> 
</div> 

As you can see, we used div to replace the drop-down control's native select tag.
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} 

Styling is optional. You can change the background and font colors in CSS, or any other style you want. A small icon with a drop-down arrow 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; if so, hide the drop-down option; otherwise, open (slide) 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 content and write the option content to < p > Tag, while hiding the drop-down option.

$("#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 need to get the value 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"> In Canberra, </a></li> 
    <li><a href="#" rel="5"> Toronto </a></li> 
  </ul> 
</div> 
<div id="result"></div> 

As you can see from the code, add an rel attribute to the a tag and assign a value equivalent to the value value of the option tag of 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 select the "+txt+" The value is: "+value); 
}); 

This completes a complete drop-down option.

This is the end of this article, I hope you enjoy it.