今天分享一个用我自己用jquery写的，用div模拟下拉列表select，这个效果网上有很多，但是写一个有自己思路的代码效果，更有成就感，先看截图：
自我感觉还有焦点获取效果没模拟出来，现在实在没想到好的办法，如果您有好的方法和思路，欢迎并谢谢你能告诉我。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>模拟下拉菜单</title>
6 <style>
7 * { margin: 0; padding: 0; }
8 body { font: 14px '微软雅黑'; color: #555; padding:50px; }
9 ul { list-style: none; }
10 p { margin-bottom: 20px; }
11 .model-select-box { width: 197px; height: 27px; line-height: 27px; border: 1px solid #aaa; float: left; margin-right: 20px; text-indent: 5px; position: relative; }
12 .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; }
13 .model-select-option { display: none; position: absolute; background: #fff; width: 100%; left: -1px; border: 1px solid #aaa; }
14 .model-select-option li { height: 22px; line-height: 22px; color: #555; cursor: pointer; }
15 .model-select-option li.seleced { background: #06C; color: #fff; }
16 </style>
17 </head>
18
19 <body>
20 <p>模拟下拉菜单</p>
21 <div class="model-select-box">
22 <div class="model-select-text" data-value="">广州-08</div>
23 <ul class="model-select-option">
24 <li data-option="1">上海-01</li>
25 <li data-option="2">北京-02</li>
26 <li data-option="3">沈阳-03</li>
27 <li data-option="4">天津-04</li>
28 <li data-option="5">武汉-05</li>
29 <li data-option="6">成都-06</li>
30 <li data-option="7">重庆-07</li>
31 <li data-option="8" class="seleced">广州-08</li>
32 <li data-option="9">拉萨-09</li>
33 <li data-option="10">石家庄-10</li>
34 <li data-option="11">乌鲁木齐-11</li>
35 <li data-option="12">济南-12</li>
36 <li data-option="13">哈尔滨-13</li>
37 <li data-option="14">吉林-14</li>
38 </ul>
39 </div>
40 <div class="model-select-box">
41 <div class="model-select-text" data-value="">北京-02</div>
42 <ul class="model-select-option">
43 <li data-option="1">上海-01</li>
44 <li data-option="2" class="seleced">北京-02</li>
45 <li data-option="3">沈阳-03</li>
46 <li data-option="4">天津-04</li>
47 </ul>
48 </div>
49 <div class="model-select-box">
50 <div class="model-select-text" data-value="">武汉-05</div>
51 <ul class="model-select-option">
52 <li data-option="1">上海-01</li>
53 <li data-option="2">北京-02</li>
54 <li data-option="3">沈阳-03</li>
55 <li data-option="4">天津-04</li>
56 <li data-option="5" class="seleced">武汉-05</li>
57 </ul>
58 </div>
59 <script src="jquery-1.7.1.min.js"></script>
60 <script>
61 $(function(){
62 /*
63 * 模拟网页中所有的下拉列表select
64 */
65 function selectModel(){
66 var $box = $('div.model-select-box');
67 var $option = $('ul.model-select-option', $box);
68 var $txt = $('div.model-select-text', $box);
69 var speed = 10;
70 /*
71 * 单击某个下拉列表时，显示当前下拉列表的下拉列表框
72 * 并隐藏页面中其他下拉列表
73 */
74 $txt.click(function(e) {
75 $option.not($(this).siblings('ul.model-select-option')).slideUp(speed, function(){
76 int($(this));
77 });
78 $(this).siblings('ul.model-select-option').slideToggle(speed, function(){
79 int($(this));
80 });
81 return false;
82 });
83 //点击选择，关闭其他下拉
84 /*
85 * 为每个下拉列表框中的选项设置默认选中标识 data-selected
86 * 点击下拉列表框中的选项时，将选项的 data-option 属性的属性值赋给下拉列表的 data-value 属性，并改变默认选中标识 data-selected
87 * 为选项添加 mouseover 事件
88 */
89 $option.find('li').each(function(index, element) {
90 if($(this).hasClass('seleced')){
91 $(this).addClass('data-selected');
92 }
93 })
94 .mousedown(function(){
95 $(this).parent().siblings('div.model-select-text').text($(this).text())
96 .attr('data-value', $(this).attr('data-option'));
97
98 $option.slideUp(speed, function(){
99 int($(this));
100 });
101 $(this).addClass('seleced data-selected').siblings('li').removeClass('seleced data-selected');
102 return false;
103 })
104 .mouseover(function(){
105 $(this).addClass('seleced').siblings('li').removeClass('seleced');
106 });
107 //点击文档，隐藏所有下拉
108 $(document).click(function(e) {
109 $option.slideUp(speed, function(){
110 int($(this));
111 });
112 });
113 //初始化默认选择
114 function int(obj){
115 obj.find('li.data-selected').addClass('seleced').siblings('li').removeClass('seleced');
116 }
117 }
118
119 selectModel();
120 })
121 </script>
122 </body>
123 </html>