jquery UI下拉列表选择菜单

1、新建html文档。

2、准备好需要用到的图标。

3、书写hmtl代码。

<div class="select">

<select name="animals" class="mySelect">

<option  class="first" value="">Animals</option>

<option  value="hippopotamus">Hippopotamus</option>

<option  value="aligator">Aligator</option>

<option  value="aligator">Fox</option>

<option  value="aligator">Lion</option>

<option  class="last" value="giraf">Giraf</option>

</select>

</div>

<div class="select">

<select name="fruits" class="mySelect3" >

<option  value="">Select fruit</option>

<option  value="Peaches">Peache</option>

<option  value="Nectarines">Nectarine</option>

<option  value="Pears">Pear</option>

<option  value="Quinces">Quince</option>

<option  value="Cherries">Cherrie</option>

<option  value="Apricots">Apricot</option>

<option  value="Apples">Apple</option>

<option  value="Plums">Plum</option>

<option  value="Clementin">Clementin</option>

<option  value="Kumquat">Kumquat</option>

<option  value="Minneola">Minneola</option>

<option  value="Mandarin">Mandarin</option>

</select>

</div>

4、书写css代码。

.select { float: left; padding: 20px; }

.selectDark { background: url("../images/darkBackground.jpg") no-repeat top left; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; }

.selectDark .passiveSelect, .selectDark .activeSelect { height: 25px; line-height: 2em; display: block; cursor: pointer; padding-left: 10px; margin-right: 10px; }

.selectDark .passiveSelect { background: url("../images/darkNormal.jpg") no-repeat top right; color: #fff; }

.selectDark .activeSelect { background: url("../images/darkActive.jpg") no-repeat top right; color: #00aeef; }

.selectDark ul { padding: 0; margin: 0; background: #525252; list-style: none; max-height: 200px; overflow-x: hidden; overflow-y: auto; cursor: pointer; width: 203px; }

.selectDark li { padding: 0; margin: 0; font-weight: normal; padding: 2px 0 2px 12px; color: #aeaeae; }

.selectDark .first { padding-top: 10px; background: url("../images/darkFirst.jpg") no-repeat top left; }

.selectDark .last { padding-bottom: 10px; background: url("../images/darkLast.jpg") no-repeat bottom left; }

.selectDark li:hover { color: #00aeef; }

.selectDark .selected { color: #fff; }

.selectFruits { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; background: url("../images/fruitsBackground.jpg") repeat-x top right; height: 27px; width: 160px; }

.selectFruits .passiveSelect, .selectFruits .activeSelect { height: 25px; line-height: 2.4em; display: block; cursor: pointer; padding-left: 10px; margin-right: 6px; color: #fff; font-weight: bold; background: url("../images/fruitsNormal.jpg") no-repeat top right; }

.selectFruits .activeSelect { color: #86c729; background: url("../images/fruitsSelected.jpg") no-repeat top right; }

.selectFruits ul { padding: 0; margin: 0; list-style: none; max-height: 350px; overflow-x: hidden; overflow-y: auto; cursor: pointer; width: 350px; padding: 3px; background: #5a5a5a url("../images/fruitsBackground2.jpg") repeat-x top right; }

.selectFruits li { padding: 0; margin: 0; width: 110px; color: #fff; display: block; float: left; padding: 3px; }

.selectFruits .special { font-weight: bold; }

.selectFruits .selected, .selectFruits li:hover { color: #86c729; }

5、书写并添加js代码。

<script src="js/jquery.js"></script> 

<script src="js/jquery.styleSelect.js"></script>

<script>

$(document).ready(function() {

$(".mySelect3").styleSelect({styleClass: "selectFruits",optionsWidth: 1,speed: 'fast'});

$(".mySelect").styleSelect({styleClass: "selectDark"});

});

</script>

6、代码整体结构。

7、查看效果。