新航路师徒学院

 找回密码
 立即注册
搜索
查看: 335|回复: 0

【新航路】javascript模拟select 源代码

[复制链接]

80

主题

114

帖子

560

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
560
发表于 2016-8-31 12:27:24 | 显示全部楼层 |阅读模式

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>javascript模拟select</title>
  6. <meta name="description" content="javascript模拟select" />
  7. <meta name="keywords" content="javascript模拟select" />
  8. <link rel="stylesheet" href="../css/index.css"/>
  9. <style>
  10. a:hover {text-decoration:none;}
  11. .k_city {width:300px;float:left;height:30px;margin-right:20px;_display:inline;position:relative;margin-top:20px;}
  12. .k_citytip {display:block;width:300px;height:30px;text-align:center;line-height:30px;font-weight:normal;font-size:16px;background-color:#ccc;color:#fff;}
  13. .k_citylist {width:300px;position:absolute;left:0;top:30px;z-index:5;display:none;}
  14. .k_citylist li {width:300px;height:30px;text-align:center;line-height:30px;font-size:14px;}
  15. .k_citylist li a {display:block;width:300px;height:30px;}
  16. .k_citylist li a:hover {background-color:#ccc;}
  17. </style>
  18. </head>
  19. <body>
  20. <div class="m960 clears">
  21.         <div class="k_city">
  22.                 <a href="javascript:;" class="k_citytip" id="k_citytip">省份</a>
  23.                 <ul class="k_citylist" id="k_citylist">
  24.                         <li><a href="#">北京</a></li>
  25.                         <li><a href="#">辽宁</a></li>
  26.                         <li><a href="#">上海</a></li>
  27.                         <li><a href="#">广东</a></li>
  28.                         <li><a href="#">大连</a></li>
  29.                         <li><a href="#">吉林</a></li>
  30.                 </ul>
  31.         </div>
  32.         <div class="k_city">
  33.                 <a href="javascript:;" class="k_citytip" id="k_citytip2">省份</a>
  34.                 <ul class="k_citylist" id="k_citylist2">
  35.                         <li><a href="#">北京</a></li>
  36.                         <li><a href="#">辽宁</a></li>
  37.                         <li><a href="#">上海</a></li>
  38.                         <li><a href="#">广东</a></li>
  39.                         <li><a href="#">大连</a></li>
  40.                         <li><a href="#">吉林</a></li>
  41.                 </ul>
  42.         </div>
  43.         <div class="k_city">
  44.                 <a href="javascript:;" class="k_citytip" id="k_citytip3">省份</a>
  45.                 <ul class="k_citylist" id="k_citylist3">
  46.                         <li><a href="#">北京</a></li>
  47.                         <li><a href="#">辽宁</a></li>
  48.                         <li><a href="#">上海</a></li>
  49.                         <li><a href="#">广东</a></li>
  50.                         <li><a href="#">大连</a></li>
  51.                         <li><a href="#">吉林</a></li>
  52.                 </ul>
  53.         </div>
  54. </div>
  55. <script>
  56. function addEvent(obj,type,fn){
  57.         if(!obj)return null;
  58.         if(obj.addEventListener){
  59.                 obj.addEventListener(type,function(event){
  60.                         var rtn = fn.call(obj,event);
  61.                         if(rtn == false){
  62.                                 event.cancelBubble = true;
  63.                                 event.preventDefault();
  64.                         }
  65.                 },false)
  66.         }else {
  67.                 obj.attachEvent('on'+type,function(){
  68.                         var rtn = fn.call(obj,window.event);
  69.                         if(rtn == false){
  70.                                 window.event.cancelBubble = true;
  71.                                 return false;
  72.                         }
  73.                 })
  74.         }
  75. }
  76. function selectSwitch(tip,list){
  77.         var doc = document;
  78.         var oSelectTip = doc.getElementById(tip);
  79.         var oSelectList = doc.getElementById(list);
  80.         var bTrue = true;
  81.         addEvent(oSelectTip,'click',function(event){
  82.                 var oEvent = event || window.event;
  83.                 if(bTrue){
  84.                         oSelectList.style.display = 'block';
  85.                         bTrue = false;
  86.                 }else {
  87.                         oSelectList.style.display = 'none';
  88.                         bTrue = true;
  89.                 }
  90.                 oEvent.cancelBubble = true;
  91.         });
  92.         addEvent(document,'click',function(){
  93.                 oSelectList.style.display = 'none';
  94.                 bTrue = true;
  95.         });
  96.         addEvent(oSelectList,'click',function(event){
  97.                 var oEvent = event || window.event;
  98.                 var oTarget = oEvent.srcElement || oEvent.target;
  99.                 oSelectTip.innerHTML = oTarget.innerHTML;
  100.         })
  101. }
  102. selectSwitch('k_citytip','k_citylist');
  103. selectSwitch('k_citytip2','k_citylist2');
  104. selectSwitch('k_citytip3','k_citylist3');
  105. /**
  106.         selectSwitch  两个id
  107.         参数一:当前显示
  108.         参数二:也就是ul的  id
  109.         实现方法,点击ul 获取当前li的innerHTML  直接 复给第一个id
  110.         css正常布局,ul需要定位显示
  111. */
  112. </script>
  113. </body>
  114. </html>
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

新航路师徒学院 ( 京ICP备16035622号

GMT+8, 2018-5-27 15:40 , Processed in 0.146192 second(s), 28 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表