JS标签选择功能
先看效果图：代码如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JS标签选择功能</title>
<style>
a{color:#000;}
a:hover{color:#000;text-decoration:none;}
.input{width:200px;height:22px;line-height:22px;border:1px solid #ccc}
.c{width:50px;height:22px;line-height:22px;border:1px solid #eee;padding: 5px;font-size:12px;text-align:center;text-decoration:none;}
</style>
</head>
<body>
<br /><br /><br />
<input id="i" type="text" class="input" contenteditable="false" />
<a href="javascript:void(0);" class="c" id="c0">黑色</a>
<a href="javascript:void(0);" class="c" id="c1">红色</a>
<a href="javascript:void(0);" class="c" id="c2">白色</a>
<a href="javascript:void(0);" class="c" id="c3">蓝色</a>
<a href="javascript:void(0);" class="c" id="c4">绿色</a>
<a href="javascript:void(0);" class="c" id="c5">紫色</a>
<script>
var x=["黑色","红色","白色","蓝色","绿色","紫色"];
var y=[];
function $(id){ return document.getElementById(id)};
for(var i=0,m=x.length;i<m;i++){
$("c"+i).onclick=(function(i){
return function(){
var s=y.join(",").indexOf(x);
if(s>=0){
for(var r in y){
if(y==x){y.splice(r,1)}
}
}
else{
y.push(x)
}
$("i").value=y.join(",");
}
})(i)
}
</script>
</body>
</html>
页:
[1]