jquery时尚下拉选择框

1、新建html文档。

2、书写hmtl代码。<div class="selCont"><h2>Change event</h2><p>Stylish Select alters the original select on the page, so you can access it's change event:</p><select id="my-dropdownChange" name="my-dropdown"> <option value="1">A cappella</option> <option value="test">Acid Jazz</option> <option value="3" selected="selected">Big Band</option> <option value="4">Big Beat</option> <option value="5">Cakewalk</option> <option value="6">Calenda</option> <option value="7">Dark ambient</option> <option value="8">Dark cabaret</option></select></div>

3、书写css代码。ul.newList * { margin: 0; padding: 0; }ul.n髫潋啜缅ewList a { color: #000; text-decoration: none; display: block; }ul.newList { margin: 0; padding: 0; list-style: none; color: #000; width: 290px; background: #fff; position: absolute; border: 1px solid #ccc; top: 22px; left: 0; overflow: auto; z-index: 9999; }.newListSelected { width: 285px; color: #000; height: 19px; padding: 3px 0 0 6px; float: left; background: url(../images/select-bg.png) no-repeat; }.newListSelected span { width: 284px; display: block; }ul.newList li a { padding: 3px 8px; display: block; }ul.newList li a:focus { -moz-outline-style: none; }.selectedTxt { width: 258px; overflow: hidden; height: 16px; padding: 0 23px 0 0; }.hiLite { background: #650101!important; color: #fff!important; }.hiLite a { background: #650101!important; color: #fff!important; }.newListHover { background: #ccc!important; color: #000!important; cursor: default; }.newListSelHover, .newListSelFocus { background-position: 0 -22px; cursor: default; }.newListOptionTitle { font-weight: bold; }.newListOptionTitle ul { margin: 3px 0 0; }.newListOptionTitle li { font-weight: normal; border-left: 1px solid #ccc; }#win-xp .newListSelected { background: #FFF url(../images/dropdown.gif) no-repeat scroll 155px 1px; border: 1px solid #A5ACB2; color: #000; height: 17px; margin-bottom: 10px; padding: 0; width: 173px; }#win-xp .newListSelected div { display: block; font-size: 0.85em; padding: 2px 21px 2px 4px; text-align: left !important; width: 149px; }#win-xp ul.newList { list-style: none; color: #000; width: 172px; background: #fff; border: 1px solid #000; top: 22px; left: 0; height: auto; overflow: auto; font-size: 0.85em; text-align: left!important; position: absolute; z-index: 9999; }#win-xp ul.newList li { padding: 2px 5px!important; border-bottom: 1px solid #cccccc; }#win-xp .hiLite { background: #316ac5!important; color: #fff!important; }#win-xp .newListHover { background: #ccc!important; color: #000!important; cursor: default; }#win-xp .newListSelHover { cursor: default; }#win-xp .newListSelHover, #win-xp .newListSelFocus { background-position: auto; }#win-xp .newListSelHover div, #win-xp .newListSelFocus div { font-weight: bold; }

4、书写并添加js代码。<script src="1.4.4/jquery-1.4.4.min.js"></script><稆糨孝汶;script src="js/jquery.stylish-select.js"></script><script >$(document).ready(function(){$('#my-dropdown, #my-dropdown2, #my-dropdown3, #my-dropdown4, #my-dropdown5, #my-dropdown6').sSelect();$('#my-dropdownCountries').sSelect({ddMaxHeight: '300px'});$('#setVal').click(function(){ $('#my-dropdown5').getSetSSValue('4');});$('#getVal').click(function(){ alert('The value is: '+$('#my-dropdown5').getSetSSValue());});$('#my-dropdownChange').sSelect().change(function(){alert('changed')});$('#addOptions').click(function(){ $('#my-dropdown6').append('<option value="newOpt">New Option</option>').resetSS(); return false;});});</script>

5、代码整体结构。

6、查看效果。