一、该实现参考与以下网上前辈的思路。最下面的二是自己的实现过程:
<html>
<head>
<title>类似评论、点评的JS标签选择功能</title>
<style>
.c{ width:100px; height:25px; line-height:25px; text-align:center;border:1pxsolid #eee; margin:10px; float:left; font-size:12px; cursor:pointer }
</style>
</head>
<body>
<div class="c" id="c0">啤酒</div>
<div class="c" id="c1">香烟</div>
<div class="c" id="c2">饮料</div>
<div class="c" id="c3">瓜子</div>
<div class="c" id="c4">水果</div>
<div class="c" id="c5">茶水</div>
<input id="i" type="text" style="width:720px; height:25px; border:1px solid #ccc"/>
<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[i]);
if(s>=0){
for(var r in y){
if(y[r]==x[i]){y.splice(r,1)}
}
}else{
y.push(x[i])
}
$("i").value=y.join(" ");
}
})(i)
}
</script>
</body>
</html>
效果:点击某标签便添加进来再次点击从div中去除
二、需要下载AUI中css 使用aui-label实现(标签里的内容为字符数组,此处的标签数组option是后台查出传入的。)
//html部分
<ul class="aui-list aui-form-list">
<li class="aui-list-item">
<section class="aui-content-padded" id='selectGx'>
</section>
</li>
</ul>
//js部分
//判断数组是否包含某元素 是:true 否:false
function isInArray(arr,value){
for(var i = 0; i < arr.length; i++){
if(value === arr[i]){
return true;
}
}
return false;
}
//取标签差集
function getDifSet(arr1,arr2){
var arr3 = new Array();
for(var i=0; i < arr1.length; i++){
var flag = true;
for(var j=0; j < arr2.length; j++){
if(arr1[i] == arr2[j])
flag = false;
}
if(flag)
arr3.push(arr1[i]);
}
return arr3;
}
//显示标签点击颜色变化
function showBq(option){
$("selectGx").innerHTML="";
function $(id){ return document.getElementById(id)};
var newoption = [].concat(option);
for(var i = 0;i < option.length;i++){
$("selectGx").innerHTML+="<div id='option"+i+"' class='aui-label' style='font-size: 18px;margin: 0px 15px 6px 5px;border-radius:25px;'>"+option[i]+"</div>";
}
for(var j=0;j<option.length;j++){
(function(j){
$("option"+j).onclick=function(){
$("option"+j).className = "aui-label aui-label-info";//styleclass为新的属性值
$("option"+j).setAttribute("class","aui-label aui-label-info");
if(isInArray(newoption,option[j])){
for(var r in newoption){
if(newoption[r] === option[j]){newoption.splice(r,1)}
}
}else{
newoption.push(option[j]);
$("option"+j).className = "aui-label";//styleclass为新的属性值
$("option"+j).setAttribute("class","aui-label");
}
//newoption为未选中的标签
//选中的标签 getDifSet(option,newoption)
}
})(j);
}
}
手机上效果:选中高亮显示