Use jQuery with CSS to create a beautiful select drop-down menu _ jquery

For me, the standard HTML element (Select) is annoying. It cannot be normally displayed on IE browser. Another point is that it not only contains simple text. This example will completely discard the select element and build the DropDown element through JQuery and CSS. The select drop-down control may be used in Form Design. Unfortunately, the default select control of IE is very ugly and cannot be controlled by styles, you cannot add images or other information to the options. Today, I will use examples to explain how to use CSS and jQuery to create beautiful drop-down menu options.

XHTML

   
Select a city
   
 
 
     
  
  
Changsha
     
  
  
Beijing
     
  
  
Nanjing
     
  
  
Canberra
     
  
  
Toronto
   
 
 
 
 

We can see that p is used to replace the native select tag of the drop-down control.
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} 

Do not talk about Styles. You can modify the background color and font color in CSS, or even any other defined styles. There is a small icon with a drop-down arrow, which has been packaged in the attachment.
JQuery
First, when you click "select city", determine whether the "ul" of the drop-down layer is displayed. If yes, hide the drop-down options. Otherwise, open the (drop-down) drop-down options.

$("#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

Label 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 operation.
Of course, if you need to obtain the value of the option to interact with the background, you need to define XHTML first.

   
Select a city
   
 
 
     
  
  
Changsha
     
  
  
Beijing
     
  
  
Nanjing
     
  
  
Canberra
     
  
  
Toronto
   
 
 
 
 
 

From the code, we can see that adding a rel attribute to tag a and assigning a value is equivalent to the value of the select option tag. The following code retrieves the rel value through jQuery:

$ ("# Dropdown ul li "). click (function () {var txt = $ (this ). text (); $ ("# dropdown p" ).html (txt); var value = $ (this ). attr ("rel"); $ ("# dropdown ul "). hide (); $ ("# result" ).html ("You selected" + txt + "with the value:" + value );});

This completes a complete drop-down operation.

The above is all the content of this article. I hope you will like it.