Heute werden wir ein sehr praktisches jQuery-Plug-in vorstellen. Es ist ein Dropdown-Feld zur Auswahl von Provinzen, Städten und Regionen, das auf der mehrstufigen Verknüpfung von jQuery basiert wurde angepasst und verschönert, das Erscheinungsbild ist viel hübscher als das, das mit dem Browser geliefert wird. Darüber hinaus kann dieses Dropdown-Feld „Auswählen“ auch das Dropdown-Ereignis binden und den Wert des aktuell ausgewählten Elements abrufen.
HTML-Code:
<script><br>
$('[name="nice-select"]').click(function (e) {<br>
$('[name="nice-select"]').find('ul').hide();<br>
$(this).find('ul').show();<br>
e.stopPropagation();<br>
});<br>
$('[name="nice-select"] li').hover(function (e) {<br>
$(this).toggleClass('on');<br>
e.stopPropagation();<br>
});<br>
$('[name="nice-select"] li').click(function (e) {<br>
var val = $(this).text();<br>
var dataVal = $(this).attr("data-value");<br>
$(this).parents('[name="nice-select"]').find('input').val(val);<br>
$('[name="nice-select"] ul').hide();<br>
e.stopPropagation();<br>
alarm("中文值是：" val);<br>
alarm("数字值是：" dataVal);<br>
//alert($(this).parents('[name="nice-select"]').find('input').val());<br>
});<br>
$(document).click(function () {<br>
$('[name="nice-select"] ul').hide();<br>
});<br>
</script>
css代码：
Körper
{
Farbe: #555;
Schriftgröße: 14px;
Schriftfamilie: „Microsoft Yahei“, „Microsoft Yahei“;
Hintergrundfarbe: #EEE;
}
a
{
Farbe: #555;
}
a:schweben
{
Farbe: #f00;
}
Eingabe
{
Schriftgröße: 14px;
Schriftfamilie: „Microsoft Yahei“, „Microsoft Yahei“;
}
.wrap
{
Breite: 500 Pixel;
Rand: 100 Pixel automatisch;
}
.h20
{
Höhe: 20px;
Überlauf: versteckt;
klar: beides;
}
.nice-select
{
Breite: 245px;
padding: 0 10px;
Höhe: 38px;
Rand: 1 Pixel durchgezogen #999;
Position: relativ;
box-shadow: 0 0 5px #999;
Hintergrund: #fff url(images/a2.jpg) no-repeat rechts in der Mitte;
Cursor: Zeiger;
}
.nice-select input
{
display: block;
Breite: 100 %;
Höhe: 38px;
Zeilenhöhe: 38px 9;
Rand: 0;
Umriss: 0;
Hintergrund: keiner;
Cursor: Zeiger;
}
.nice-select ul
{
Breite: 100 %;
Anzeige: keine;
Position: absolut;
links: -1px;
oben: 38px;
Überlauf: versteckt;
Hintergrundfarbe: #fff;
maximale Höhe: 150 Pixel;
overflow-y: auto;
Rand: 1 Pixel durchgezogen #999;
border-top: 0;
box-shadow: 0 3px 5px #999;
Z-Index: 9999;
}
.nice-select ul li
{
Höhe: 30px;
Zeilenhöhe: 30 Pixel;
Überlauf: versteckt;
padding: 0 10px;
Cursor: Zeiger;
}
.nice-select ul li.on
{
Hintergrundfarbe: #e0e0e0;
}
Der Code ist sehr einfach, daher werde ich ihn hier nicht zu sehr erklären. Sie können ihn selbst in der Vorschau ansehen und werden sehen, wie einfach und elegant der Effekt ist, und er ist sehr praktisch.
