add.jsp 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  3. <% String basePath = request.getScheme()+ "://" + request.getServerName() + ":" +request.getServerPort() + request.getContextPath(); %>
  4. <% String contextPath = request.getContextPath() ;%>
  5. <!DOCTYPE html>
  6. <html>
  7. <head>
  8. <script type="text/javascript" src="<%=basePath %>/js/jquery-1.8.0.min.js"></script>
  9. <script type="text/javascript" src="<%=basePath%>/js/select2.js"></script>
  10. <link rel="stylesheet" href="<%=basePath%>/style/bootsstrap.min.css">
  11. <link rel="stylesheet" href="<%=basePath%>/style/select2.min.css">
  12. </head>
  13. <body>
  14. <div id="body">
  15. <table class="table table-bordered table-striped" width="1000" border="none" cellspacing="0" cellpadding="0">
  16. <tbody>
  17. <tr>
  18. <td align="right">多选标签——火影忍者:</td>
  19. <td>
  20. <select class="combox" id="sel_productTag" name="tagId" multiple>
  21. </select>
  22. </td>
  23. </tr>
  24. <tr>
  25. <td align="right">单选标签——火影忍者:</td>
  26. <td>
  27. <select class="combox" id="sel_recommender" name="recommenderId">
  28. </select>
  29. </td>
  30. </tr>
  31. </tbody>
  32. </table>
  33. </div>
  34. <script type="text/javascript">
  35. $(function(){
  36. $.ajax({
  37. type: "post",//使用get方法访问后台
  38. dataType: "json",//返回json格式的数据
  39. url: "departmentAction_getList?departmentId=7",//要访问的后台地址
  40. complete :function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示
  41. success: function(msg){//msg为返回的数据,在这里做数据绑定
  42. for(var i = 0; i < msg.length; i++){
  43. $("#sel_recommender").append("<option value="+msg[i].id+">"+msg[i].text+"</span>");
  44. }
  45. }
  46. });
  47. $.ajax({
  48. type: "post",//使用get方法访问后台
  49. dataType: "json",//返回json格式的数据
  50. url: "departmentAction_getList?departmentId=7",//要访问的后台地址
  51. complete :function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示
  52. success: function(msg){//msg为返回的数据,在这里做数据绑定
  53. for(var i = 0; i < msg.length; i++){
  54. $("#sel_productTag").append("<option value="+msg[i].id+">"+msg[i].text+"</span>");
  55. }
  56. }
  57. });
  58. $('#sel_productTag').select2({
  59. tags:true,
  60. createTag:function (decorated, params) {
  61. return null;
  62. },
  63. width:'400px'
  64. });
  65. function formatState (state) {
  66. if (!state.id) { return state.text; }
  67. var $state = $(
  68. '<span>' + state.text + '</span>'
  69. );
  70. return $state;
  71. };
  72. $('#sel_recommender').select2({
  73. templateResult: formatState,
  74. width:'300px'
  75. });
  76. });
  77. </script>
  78. </body>
  79. </html>