详解JavaScript添加给定的标签选项

先看看效果图：

代码实现：

HTML代码：

rush:js;">

haveTags

---

addTags

css代码：

rush:js;"> #havetags span,#addtags span { display: inline-block; padding: 0 0 0 10px; margin: 2px 5px; border: 1px solid #000; }

havetags span::after,#addtags span::after {

content: "+";
display: inline-block;
padding: 0 10px;
background-color: #00ffff;
margin-left: 5px;
}

addtags span::after {

content: "x";
}

js代码：

rush:js;"> // 拥有的标签 var haveArr = ["HTML","CSS","JavaScript","jQuery","Vue","Bootstrap"];

// 添加的标签
var addArr = ["PHP","MysqL"];

/**

• [tagsShow 展示拥有的标签]
• @param {[String]} haveTagsId [展示拥有标签的HTML标签ID]
• @param {[String]} addTagsId [展示添加标签的HTML标签ID]
• @param {[Array]} haveTags [拥有标签的数组]
• @param {[Array]} addTags [添加标签的数组]
  */
  function tagsShow(haveTagsId,addTagsId,haveTags,addTags) {

for(var i = 0; i < haveTags.length; i++) {

document.getElementById(haveTagsId).innerHTML += "" + haveTags[i] + "";

}

addTag(haveTagsId,haveArr,addArr);

for(var i = 0; i < addTags.length; i++) {

document.getElementById(addTagsId).innerHTML += "" + addTags[i] + "";

}

delTag(haveTagsId,addTags);

}

/**

• 添加标签
• @param {[String]} haveTagsId [展示拥有标签的HTML标签ID]
• @param {[String]} addTagsId [展示添加标签的HTML标签ID]
• @param {[Array]} haveTags [拥有标签的数组]
• @param {[Array]} addTags [添加标签的数组]
  */
  function addTag(haveTagsId,addTags) {

var len = document.getElementById(haveTagsId).children.length;

for(var i = 0; i < len; i++) {

document.getElementById(haveTagsId).children[i].onclick = function() {

this.remove();

addTags.push(this.innerHTML);

document.getElementById(addTagsId).innerHTML += "" + this.innerHTML + "";

haveTags.splice(haveTags.indexOf(this.innerHTML),1); // 从数组中删除该元素

delTag(haveTagsId,addTags);
}

}

}

/**

• 删除标签
• @param {[String]} haveTagsId [展示拥有标签的HTML标签ID]
• @param {[String]} addTagsId [展示添加标签的HTML标签ID]
• @param {[Array]} haveTags [拥有标签的数组]
• @param {[Array]} addTags [添加标签的数组]
  */
  function delTag(haveTagsId,addTags) {

var len = document.getElementById(addTagsId).children.length;

for(var i = 0; i < len; i++) {

document.getElementById(addTagsId).children[i].onclick = function() {

this.remove();

haveTags.push(this.innerHTML);

document.getElementById(haveTagsId).innerHTML += "" + this.innerHTML + "";

addTags.splice(addTags.indexOf(this.innerHTML),1); // 从数组中删除该元素

addTag(haveTagsId,addTags);

}

}

}

// 展示标签
tagsShow('havetags','addtags',addArr);

// 最终数组
document.getElementById("btn").onclick = function() {

console.log(haveArr);

console.log(addArr);

}

以上就是JavaScript如何实现添加给定的标签选项？（代码实例）的详细内容，更多请关注编程之家网其它相关文章！