1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=GBK"> 4 <title>模拟下拉菜单</title> 5 <style> 6 * { margin: 0; padding: 0; } 7 body { font: 14px '微软雅黑'; color: #555; padding:50px; } 8 ul { list-style: none; } 9 p { margin-bottom: 20px; } 10 .model-select-box { 197px; height: 27px; line-height: 27px; border: 1px solid #aaa; float: left; margin-right: 20px; text-indent: 5px; position: relative; } 11 .model-select-text { height: 27px; padding-right: 27px; background: url(http://t43-2.yunpan.360.cn/p/800-600.e692334dad266bef653533e12fa291286932eb10.3619c0.jpg?t=64368e238226776012c7ea2a6ad4dcce&d=20140221) no-repeat right 0; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; user-select: none; } 12 .model-select-option { display: none; position: absolute; background: #fff; 100%; left: -1px; border: 1px solid #aaa; } 13 .model-select-option li { height: 22px; line-height: 22px; color: #555; cursor: pointer; } 14 .model-select-option li.seleced { background: #06C; color: #fff; } 15 </style> 16 </head> 17 18 <body> 19 <p>模拟下拉菜单</p> 20 <div class="model-select-box"> 21 <div class="model-select-text" data-value="">广州-08</div> 22 <ul class="model-select-option"> 23 <li data-option="1">上海-01</li> 24 <li data-option="2">北京-02</li> 25 <li data-option="3">沈阳-03</li> 26 <li data-option="4">天津-04</li> 27 <li data-option="5">武汉-05</li> 28 <li data-option="6">成都-06</li> 29 <li data-option="7">重庆-07</li> 30 <li data-option="8" class="seleced">广州-08</li> 31 <li data-option="9">拉萨-09</li> 32 <li data-option="10">石家庄-10</li> 33 <li data-option="11">乌鲁木齐-11</li> 34 <li data-option="12">济南-12</li> 35 <li data-option="13">哈尔滨-13</li> 36 <li data-option="14">吉林-14</li> 37 </ul> 38 </div> 39 <div class="model-select-box"> 40 <div class="model-select-text" data-value="">北京-02</div> 41 <ul class="model-select-option"> 42 <li data-option="1">上海-01</li> 43 <li data-option="2" class="seleced">北京-02</li> 44 <li data-option="3">沈阳-03</li> 45 <li data-option="4">天津-04</li> 46 </ul> 47 </div> 48 <div class="model-select-box"> 49 <div class="model-select-text" data-value="">武汉-05</div> 50 <ul class="model-select-option"> 51 <li data-option="1">上海-01</li> 52 <li data-option="2">北京-02</li> 53 <li data-option="3">沈阳-03</li> 54 <li data-option="4">天津-04</li> 55 <li data-option="5" class="seleced">武汉-05</li> 56 </ul> 57 </div> 58 <script src="cxx/jquery.min.js"></script> 59 <script> 60 $(function(){ 61 /* 62 * 模拟网页中所有的下拉列表select 63 */ 64 function selectModel(){ 65 var $box = $('div.model-select-box'); 66 var $option = $('ul.model-select-option', $box); 67 var $txt = $('div.model-select-text', $box); 68 var speed = 10; 69 /* 70 * 单击某个下拉列表时，显示当前下拉列表的下拉列表框 71 * 并隐藏页面中其他下拉列表 72 */ 73 $txt.click(function(e) { 74 $option.not($(this).siblings('ul.model-select-option')).slideUp(speed, function(){ 75 int($(this)); 76 }); 77 $(this).siblings('ul.model-select-option').slideToggle(speed, function(){ 78 int($(this)); 79 }); 80 return false; 81 }); 82 //点击选择，关闭其他下拉 83 /* 84 * 为每个下拉列表框中的选项设置默认选中标识 data-selected 85 * 点击下拉列表框中的选项时，将选项的 data-option 属性的属性值赋给下拉列表的 data-value 属性，并改变默认选中标识 data-selected 86 * 为选项添加 mouseover 事件 87 */ 88 $option.find('li').each(function(index, element) { 89 if($(this).hasClass('seleced')){ 90 $(this).addClass('data-selected'); 91 } 92 }) 93 .mousedown(function(){ 94 $(this).parent().siblings('div.model-select-text').text($(this).text()) 95 .attr('data-value', $(this).attr('data-option')); 96 97 $option.slideUp(speed, function(){ 98 int($(this)); 99 }); 100 $(this).addClass('seleced data-selected').siblings('li').removeClass('seleced data-selected'); 101 return false; 102 }) 103 .mouseover(function(){ 104 $(this).addClass('seleced').siblings('li').removeClass('seleced'); 105 }); 106 //点击文档，隐藏所有下拉 107 $(document).click(function(e) { 108 $option.slideUp(speed, function(){ 109 int($(this)); 110 }); 111 }); 112 //初始化默认选择 113 function int(obj){ 114 obj.find('li.data-selected').addClass('seleced').siblings('li').removeClass('seleced'); 115 } 116 } 117 118 selectModel(); 119 }) 120 </script> 121 </body> 122 </html>