Jquery实现类别的动态选择与删除

关注

原创最新推荐文章于 2025-12-19 11:09:58 发布 497 阅读 AI 写同款· GEO 优化 ›

基于jQuery的交互式留言板设计与实现 jQuery诞生于2006年，由John Resig创建，旨在解决原生JavaScript在DOM操作、事件处理和浏览器兼容性方面的复杂性。其“写得少，做得多”（Write Less, Do More）的核心理念，推动了前端开发的范式转变。在IE6/7/8主导的时代，jQuery通过封装底层差异，统一API接口，成为事实上的标准库。用于在元素上附加任意 JavaScript 数据，底层使用内部缓存机制，避免内存泄漏。// 获取复合数据// 1001jQuery 会自动解析data-* 阅读详情

用jquery实现角色的动态选择与删除。效果如下图。利用了Bootrap的label, panel 和glyphicon样式。

第一步：实现页面的显示

<div class="panel panel-default">
//选中的角色
<div class="panel-heading panel-info">
<span style="white-space:pre">	</span><ul id="selectrole" class="list-inline">
<span style="white-space:pre">		</span><li><span class="label label-success">selected</span><span
<span style="white-space:pre">			</span>class="glyphicon glyphicon-remove" style="cursor: pointer;"></span></li>
<span style="white-space:pre">	</span></ul>
</div>
//待选择的角色
<div class="panel-body">
<span style="white-space:pre">	</span><ul id="unselectrole" class="list-inline">
<span style="white-space:pre">		</span><c:if test="${not empty roles}">
<span style="white-space:pre">			</span><c:forEach items="${roles}" var="role">
<span style="white-space:pre">				</span><li><span>${role.roleName}</span><span
<span style="white-space:pre">					</span>class="glyphicon glyphicon-plus" style="cursor: pointer;"></span></li>
<span style="white-space:pre">			</span></c:forEach>
<span style="white-space:pre">		</span></c:if>
<span style="white-space:pre">	</span></ul>
</div>
</div>

第二步，实现点击的动态选择与删除

	//将选中角色放回到待选框中
	$(document).on('click', '.glyphicon-plus', function() {
		var link=$(this);
		var apptext = "<li><span class='label label-success'>" + link.prev().html() + "</span><span class='glyphicon glyphicon-remove' style='cursor: pointer;'></span></li>";
		$('#selectrole').append(apptext);
		link=link.parent("li");
		link.remove();
	});
	
	//将待选角色放到选择框内
	$(document).on('click', '.glyphicon-remove', function() {
		var link=$(this);
		var apptext = "<li><span>" + link.prev().html() + "</span><span class='glyphicon glyphicon-plus' style='cursor: pointer;'></span></li>";
		$('#unselectrole').append(apptext);
		link=link.parent("li");
		link.remove();
	});

注意事项：

因涉及到动态增加html代码，juqery的click 和 bind绑定不再可用。而且jquery1.7版本之后取消了live()方法。因此采用on方法。但跟live的区别是on方法需用$(document)作为主体，然后在后面添加筛选。$(document).on('click', '.glyphicon-remove', function() {}；

如果直接使用$('.glyphicon-remove').on('click', ,function() {}；对动态添加的节点仍然不可用。

收录于