jQuery combined with CSS to create a beautiful select drop-down menu

When we design forms, we may need to use the select drop-down option control. Unfortunately, the default select control in IE browser has a very ugly appearance, and cannot be controlled with styles, and images and other information cannot be added to the options. Today I will explain through examples how to use CSS and jQuery to create a beautiful drop-down option menu.

XHTML

请选择城市长沙北京南京堪培拉多伦多

As you can see, we use div to replace the native select tag of the drop-down option 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}

Don’t talk too much about styles. You can modify the background color and font color in CSS, and even other arbitrarily defined styles. There is a small icon with a drop-down arrow, which has been packaged in the attachment.
jQuery
First, when "Please select a city" is clicked, determine whether the drop-down layer "ul" is displayed. If so, hide the drop-down option, otherwise 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 the drop-down option is clicked, get the option content, write the option content into the

tag, and hide 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, isn’t it very simple?
Of course, if you need to get the value of the option when interacting with the background, you need to define XHTML first.

请选择城市长沙北京南京堪培拉多伦多

As you can see from the code, adding a rel attribute to the a tag and assigning it a value is equivalent to the value of the option tag of select. The next step is to get the rel value through jQuery, please 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("您选择了"+txt+"，值为："+value); 
});

This completes a complete drop-down option operation.

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

【Recommended related tutorials】

1. JavaScript video tutorial
2. JavaScript online manual
3. bootstrap tutorial