详细介绍与相关文件的下载可以参考 http://www.jqueryscript.net/demo/Nice-Tags-Manager-Plugin-with-jQuery-Bootstrap-Bootstrap-Tags-Input/examples/
tagsinput组件效果
效果图如下：
即建输入框中的内容标签化，以逗号或者回车键来区分。
1 下载（http://select2.github.io/select2/）并引入相关的文件，包括jquery和tagsinput的文件
<script type="text/javascript" src="../fe-res/js/jquery.min.js"></script>
<script src="../resource/tagsinput/bootstrap-tagsinput.js"></script>
<link rel="stylesheet" href="../resource/tagsinput/bootstrap-tagsinput.css">
<link href="../resource/css/bootstrap.css" rel="stylesheet">
<link href="../resource/css/bootstrap.min.css" rel="stylesheet">
2 后台数据请求，并跳转到jsp
@RequestMapping(value="/reportset/testinput.action")
public String testinput(ModelMap modelMap,ServletResponse response ){
return "reportset/inputtest-exp";
}3 inputtest-exp.jsp页面
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>报告集详情</title>
<link rel="shortcut icon" type="image/x-icon" href="../resource/image/rs_favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script type="text/javascript" src="../fe-res/js/jquery.min.js"></script>
<script src="../resource/tagsinput/bootstrap-tagsinput.js"></script>
<link rel="stylesheet" href="../resource/tagsinput/bootstrap-tagsinput.css">
<link href="../resource/css/bootstrap.css" rel="stylesheet">
<link href="../resource/css/bootstrap.min.css" rel="stylesheet">
</head>
<script language="javascript">
// 弹出当前选择的value
function show(){
// 获取选中的对象的值，逗号拼接
var reslist=$("#e").val(); //多选,获取object
alert(reslist);
}
</script>
<body>
<div>
<input type="text" id="e" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />
<input type="button" value="show" onclick="show();">
</div>
</body>两个图标下载网址：
https://www.iconfont.cn/search/
https://icons8.cn/icons/
293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
