脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jquery用div模拟一个下拉列表框，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 自我感觉还有焦点获取效果没模拟出来，现在实在没想到好的办法，如果您有好的方法和思路，欢迎并谢谢你能告诉我。
复制代码
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 <p class="model-select-box">
22 <p class="model-select-text" data-value="">广州-08</p>
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 </p>
40 <p class="model-select-box">
41 <p class="model-select-text" data-value="">北京-02</p>
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 </p>
49 <p class="model-select-box">
50 <p class="model-select-text" data-value="">武汉-05</p>
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 </p>
59 <script src="jquery-1.7.1.min.js"></script>
60 <script>
61 $(function(){
62 /*
63 * 模拟网页中所有的下拉列表select
64 */
65 function selectModel(){
66 VAR $box = $('p.model-select-box');
67 var $option = $('ul.model-select-option', $box);
68 var $txt = $('p.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('p.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>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-jquery用div模拟一个下拉列表框全部内容，希望文章能够帮你解决javascript代码实例教程-jquery用div模拟一个下拉列表框所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。