Home > Web Front-end > JS Tutorial > jQuery combined with CSS to create a beautiful select drop-down menu

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

PHPz
Release: 2018-10-15 15:09:03
Original
1348 people have browsed it

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

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

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}
Copy after login

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"); 
  } 
});
Copy after login

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(); 
});
Copy after login

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.

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

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); 
});
Copy after login

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template