jQuery combiné avec CSS pour créer un magnifique menu déroulant de sélection

Lorsque nous concevons des formulaires, nous devrons peut-être utiliser le contrôle d'option déroulant de sélection. Malheureusement, le contrôle de sélection par défaut dans le navigateur IE a une apparence très moche et ne peut pas être contrôlé avec des styles, et les images et autres informations ne peuvent pas l'être. ajouté aux options. Aujourd'hui, je vais expliquer à travers des exemples comment utiliser CSS et jQuery pour créer un magnifique menu d'options déroulant.

XHTML

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

Comme vous pouvez le voir, nous utilisons div pour remplacer la balise de sélection native du contrôle d'option déroulant.
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}

Ne parlez pas trop de styles Vous pouvez modifier la couleur d'arrière-plan et la couleur de la police en CSS, et même d'autres styles définis arbitrairement. Il y a une petite icône avec une flèche déroulante, qui a été incluse dans la pièce jointe.
jQuery
Tout d'abord, lorsque vous cliquez sur "Veuillez sélectionner une ville", déterminez si le calque déroulant "ul" est affiché. Si c'est le cas, masquez l'option déroulante, sinon ouvrez (faites glisser vers le bas) le menu déroulant. -option déroulante

$("#dropdown p").click(function(){ 
  var ul = $("#dropdown ul"); 
  if(ul.css("display")=="none"){ 
    ul.slideDown("fast"); 
  }else{ 
    ul.slideUp("fast"); 
  } 
});

Ensuite, lorsque vous cliquez sur l'option déroulante, récupérez le contenu de l'option, écrivez le contenu de l'option dans la balise

et masquez l'option déroulante.

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

Cela complète une simple opération d'option déroulante, n'est-ce pas très simple ?
Bien sûr, si vous avez besoin d'obtenir la valeur de l'option lors de l'interaction avec l'arrière-plan, vous devez d'abord définir XHTML.

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

Comme vous pouvez le voir dans le code, ajouter un attribut rel à la balise a et lui attribuer une valeur équivaut à la valeur de la balise option de select . L'étape suivante consiste à obtenir la valeur rel via jQuery, veuillez consulter le 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); 
});

Cela termine une opération complète d'option déroulante.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

【Tutoriels associés recommandés】

1. Tutoriel vidéo JavaScript
2 Manuel en ligne JavaScript
3. tutoriel bootstrap