现在要做的就是最多可以选择三个标签，选中的标签要在“选择标签”那一栏里面显示。
标签都是span元素，“选择标签”那一栏是个input。
这个效果该怎么实现呢？请教jquery高手 ，谢谢 ~
现在要做的就是最多可以选择三个标签，选中的标签要在“选择标签”那一栏里面显示。
标签都是span元素，“选择标签”那一栏是个input。
这个效果该怎么实现呢？请教jquery高手 ，谢谢 ~
假定你这些标签的数据都是从后端渲染的，那么就会有相应的id和值，假设页面渲染出来是这个效果
<code><div class="container">
<div class="input-group input-group-sm">
<input type="text" class="form-control" id="input" readonly>
<span class="input-group-addon" id="certainBtn">确定</span>
</div>
<div class="btn-group btn-group-sm mt" id="labels">
<span type="button" class="btn btn-default" data-id="1" data-value="公司运营">公司运营</span>
<span type="button" class="btn btn-default" data-id="2" data-value="互联网营销">互联网营销</span>
<span type="button" class="btn btn-default" data-id="3" data-value="组织变革">组织变革</span>
<span type="button" class="btn btn-default" data-id="4" data-value="招聘/激励">招聘/激励</span>
<span type="button" class="btn btn-default" data-id="5" data-value="品牌公关">品牌公关</span>
<span type="button" class="btn btn-default" data-id="6" data-value="财务/法务">财务/法务</span>
</div>
</div>
(function ($) {
var $labels = $('#labels'); //标签栏
var $input = $('#input'); //输入框
var $certainBtn=$('#certainBtn'); //确定按钮
var data = {};//已选择的数据
var max = 3; //最多选择数目
var activeClass = 'btn-primary'; //选中的active样式
$labels.on('click', 'span', function () {
var $this = $(this);
var id = $this.data('id');
var value = $this.data('value');
var isSelected = $this.hasClass(activeClass);//是否被选中
//超过数目限制则不做处理
if (!isSelected && Object.keys(data).length >= max) {
return;
}
isSelected ? delete data[id] : data[id] = value;
$this.toggleClass(activeClass);
renderInput();
});
$certainBtn.click(function () {
console.log(data);
});
function renderInput() {
var values = [];
for (var id in data) {
values.push(data[id]);
}
$input.val(values.toString());
//with underscore
//$input.val(_.values(data).toString());
}
})(jQuery);
</code>采用组件化的思想重新写一个
<code>(function($){
var labelChoose = {
el: {
$labels: $('#labels'),
$input: $('#input'),
$certainBtn: $('#certainBtn')
},
max: 3,
data: {},
activeClass: 'btn-primary',
init: function (defaultData) {
var self = this;
this.renderInit(defaultData); //初始化
this.el.$labels.on('click', 'span', function (e) {
self.labelsClick(e);
});
this.el.$certainBtn.on('click', function (e) {
self.certainClick(e);
});
},
labelsClick: function (e) {
var $this = $(e.currentTarget);
var id = $this.data('id');
var value = $this.data('value');
var isSelected = $this.hasClass(this.activeClass);//是否被选中
//超过数目限制则不做处理
if (!isSelected && Object.keys(this.data).length >= this.max) {
return;
}
isSelected ? delete this.data[id] : this.data[id] = value;
$this.toggleClass(this.activeClass);
this.renderInput();
},
renderLabels: function () {
var self = this;
this.el.$labels.find('span').each(function () {
var $this = $(this);
var id = $this.data('id');
for (var idz in self.data) {
if (idz === id.toString()) {
$this.addClass(self.activeClass);
}
}
});
},
renderInput: function () {
var values = [];
for (var id in this.data) {
values.push(this.data[id]);
}
//with underscore
//this.el.$input.val(_.values(this.data).toString());
this.el.$input.val(values.toString());
},
certainClick: function (e) {
console.log(this.data);
},
renderInit: function (defaultData) {
this.data = defaultData || {};
this.renderLabels();
this.renderInput();
}
};
labelChoose.init({
'1': '公司运营',
'2': '互联网营销'
});
})(jQuery);
</code>由于涉及到数据操作和this绑定，和underscore结合起来使用会比较好点，以上代码仅供参考！
大概要做这么几件事：
<code>1.定义显示被选中的标签的函数 2.在每个标签上设置点击事件 </code>
在每次点击标签的时候，把当前的this标签传到1的函数里，append到input的value里。
这种插件自己写的话会很麻烦 建议直接用插件去实现
给你说两个吧 都是我经常用到的：
select2 和 flatui(前端UI框架)
我再简单描述一下自己写代码要怎么实现：
input框里肯定是要有CSS和JS来控制的
span标签添加点击事件，点击后加个display:none的style（并不是删除 方便在input中点击移除后重新展现）。
假定span有个id叫sp1 input的id叫show，大概的思路是这样的：
<code>$('#sp1').click(function(){
$(this).css('display','none');
//获取span中的值复制给input
$('#show').val($(this).html());
})
</code>span中的值赋值给input久做好了，但是如果在input点击后取消显示就有一些复杂了，你需要定制一些样式，最起码input中的值可以点击并且触发事件。我就说这么多，起到抛砖引玉的作用。
