jQuery kombiniert mit CSS, um ein schönes Auswahl-Dropdown-Menü zu erstellen

Wenn wir Formulare entwerfen, müssen wir möglicherweise das Auswahl-Dropdown-Optionssteuerelement verwenden. Leider sieht das Standardauswahlsteuerelement im IE-Browser sehr hässlich aus und kann nicht mit Stilen gesteuert werden, ebenso wie Bilder und andere Informationen zu den Optionen hinzugefügt. Heute werde ich anhand von Beispielen erklären, wie man mit CSS und jQuery ein schönes Dropdown-Optionsmenü erstellt.

XHTML

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

Wie Sie sehen können, verwenden wir div, um das native Select-Tag des Dropdown-Optionssteuerelements zu ersetzen.
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}

Reden Sie nicht zu viel über Stile. Sie können die Hintergrundfarbe und Schriftfarbe in CSS und sogar andere willkürlich definierte Stile ändern. Im Anhang befindet sich ein kleines Symbol mit einem Dropdown-Pfeil.
jQuery
Wenn Sie auf „Bitte wählen Sie eine Stadt“ klicken, stellen Sie zunächst fest, ob die Dropdown-Ebene „ul“ angezeigt wird. Wenn ja, blenden Sie die Dropdown-Option aus, andernfalls öffnen Sie die Dropdown-Liste (nach unten schieben). -Down-Option

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

Wenn Sie dann auf die Dropdown-Option klicken, rufen Sie den Optionsinhalt ab und schreiben Sie den Optionsinhalt in das Tag

, und blenden Sie die Dropdown-Option aus.

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

Damit ist ein einfacher Dropdown-Optionsvorgang abgeschlossen, ist das nicht sehr einfach?
Wenn Sie bei der Interaktion mit dem Hintergrund den Wert der Option erhalten möchten, müssen Sie natürlich zuerst XHTML definieren.

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

Wie Sie dem Code entnehmen können, entspricht das Hinzufügen eines rel-Attributs zum a-Tag und das Zuweisen eines Werts dem Wert des Option-Tags von select . Der nächste Schritt besteht darin, den rel-Wert über jQuery abzurufen. Bitte sehen Sie sich den Code an:

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

Damit ist ein vollständiger Dropdown-Optionsvorgang abgeschlossen.

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er gefällt euch allen.

【Empfohlene verwandte Tutorials】

1. JavaScript-Video-Tutorial
2. JavaScript-Online-Handbuch
Bootstrap-Tutorial