设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 603|回复: 0

[jQuery/Js/AJAX] JS标签选择功能

[复制链接]

374

主题

381

帖子

2554

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2554
发表于 2014-3-6 14:00:29 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
先看效果图:
演示.jpg

代码如下:
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>JS标签选择功能</title>
  6. <style>
  7. a{color:#000;}
  8. a:hover{color:#000;text-decoration:none;}
  9. .input{width:200px;height:22px;line-height:22px;border:1px solid #ccc}
  10. .c{width:50px;height:22px;line-height:22px;border:1px solid #eee;padding: 5px;font-size:12px;text-align:center;text-decoration:none;}
  11. </style>
  12. </head>
  13. <body>
  14. <br /><br /><br />
  15. <input id="i" type="text" class="input" contenteditable="false" />
  16. <a href="javascript:void(0);" class="c" id="c0">黑色</a>
  17. <a href="javascript:void(0);" class="c" id="c1">红色</a>
  18. <a href="javascript:void(0);" class="c" id="c2">白色</a>
  19. <a href="javascript:void(0);" class="c" id="c3">蓝色</a>
  20. <a href="javascript:void(0);" class="c" id="c4">绿色</a>
  21. <a href="javascript:void(0);" class="c" id="c5">紫色</a>
  22. <script>
  23. var x=["黑色","红色","白色","蓝色","绿色","紫色"];
  24. var y=[];
  25. function $(id){ return document.getElementById(id)};
  26. for(var i=0,m=x.length;i<m;i++){
  27. $("c"+i).onclick=(function(i){
  28. return function(){
  29. var s=y.join(",").indexOf(x[i]);
  30. if(s>=0){
  31. for(var r in y){
  32. if(y[r]==x[i]){y.splice(r,1)}
  33. }
  34. }
  35. else{
  36. y.push(x[i])
  37. }
  38. $("i").value=y.join(",");
  39. }
  40. })(i)
  41. }
  42. </script>
  43. </body>
  44. </html>
复制代码

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

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-3 23:33

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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