jquery用div模拟一个下拉列表框

程序员文章站 2023-01-28 22:14:36

自我感觉还有焦点获取效果没模拟出来，现在实在没想到好的办法，如果您有好的方法和思路，欢迎并谢谢你能告诉我。复制代码 1

自我感觉还有焦点获取效果没模拟出来，现在实在没想到好的办法，如果您有好的方法和思路，欢迎并谢谢你能告诉我。

复制代码

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>

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'));

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>

上一篇： ASP.NET MVC+EF框架+EasyUI实现权限管理系列(2)-数据库访问层的设计Demo

下一篇：聪明小朋友

jquery用div模拟一个下拉列表框