JqueryTag编辑，选择标签

QQ反馈群：1065433015

分享一个自己利用Jquery做的选择，编辑标签，可以用在很多地方。比如可以用在浮动多选，单选等需求的地方。示例演示地址在下方。

HTML:

CSS：

.EditorShow {     width: 500px;     height: 30px;     border: 1px solid #ccc;     margin: 0 auto;     font: 13px "微软雅黑", Arial, Helvetica, sans-serif;     outline: none;     background-color: #efefef; } #EditorSelect {     width: 500px;     height: 30px;     border: 1px solid #ccc;     margin-top: 20px; } .SelectItem,.SelectItemTwo {     float: left;     padding: 0px 20px 0px 10px;     border: 1px solid #f2f2f2;     font: 12px "微软雅黑", Arial, Helvetica, sans-serif;     margin-top: 5px;     margin-left: 10px;     background-color: #e1f3da;     color: #45872c;     cursor: pointer; } .SelectItemTwo{     padding: 0px 10px 0px 10px; } .SelectItem>span {     color: #fff;     float: right;     margin-right: -15px;     width: 7px;     height: 7px;     background-image: url(removeBtn.png);     margin-top: 5px;     cursor: pointer; } .SelectItem>span:hover {     background-position: 0px -14px; }   .EditorSHowTwo{     background-color:#fff; }

var TagEditor={     Init:function(){         $(".SelectItem").click(function(){             var value=$(this).text();             var text=$(this).parent().prev().val();                           if(text.indexOf(value)>=0)return;                           if($(this).parent().prev().val()=="")             $(this).parent().prev().val(value);             else             {                 var hasValue=$(this).parent().prev().val();                 $(this).parent().prev().val(hasValue "," value);             }         });         $(".SelectItem>span").click(function(event){             event.stopPropagation();             var value=$(this).parent().text();             var parentValue=$(this).parent().parent().prev().val();             var newValue="";             if(parentValue.indexOf(value)>1){              newValue=parentValue.replace("," value,'');             }             else{                 if(parentValue.indexOf(value)==0){                     if(parentValue.indexOf(",")>=0)                      newValue=parentValue.replace(value ",",'');                      else                      newValue=parentValue.replace(value,'');                 }else{              newValue=parentValue.replace(value,'');                 }             }                           $(this).parent().parent().prev().val(newValue)         });         $(".EditorSHowTwo").focusout(function(){             $(".EditorSelectTwo").children().remove();             var value=$(this).val();             var valueArray=value.split(',');             for(var i=0;i<valueArray.length;i  ){                 var item=$("" valueArray[i] "");                 $(".EditorSelectTwo").append(item);             }         });     } }