标签：
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <% 3 String path = request.getContextPath(); 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 5 %> 6 <!DOCTYPE html> 7 <html> 8 <head> 9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 10 <title>File Info</title> 11 <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.1/themes/default/easyui.css"> 12 <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.1/themes/icon.css"> 13 <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.1/themes/color.css"> 14 <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.1/demo/demo.css"> 15 <link rel="stylesheet" type="text/css" href="../css/info.css"> 16 <script type="text/javascript" src="../jquery-easyui-1.4.1/jquery.min.js"></script> 17 <script type="text/javascript" src="../jquery-easyui-1.4.1/jquery.easyui.min.js"></script> 18 <script type="text/javascript" src="../jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script> 19 <!-- <script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script> --> 20 <script type="text/javascript" src="../js/Common.js"></script> 21 <style type="text/css"> 22 .test_box { 23 width: 400px; 24 min-height: 120px; 25 max-height: 300px; 26 _height: 120px; 27 border:solid 1px blue; 28 outline:0; 29 } 30 .test_box p{ margin: 0; } 31 </style> 32 </head> 33 <body> 34 <!-- 显示文件信息的表格 --> 35 <!-- <table id="dg" class="easyui-datagrid" style="height: 470px;" 36 url="findAll.do" 37 toolbar="#toolbar" pagination="true" 38 rownumbers="true" fitColumns="true" singleSelect="true" 39 data-options="fit:false,border:false,pageSize:5,pageList:[5,10,15,20]" > 40 <thead> 41 <tr> 42 此处必须和实体类字段一致 43 <th field="filename" width="50">文件名</th> 44 <th field="filepath" width="50">文件路径</th> 45 <th field="updatedate" width="50">上传时间</th> 46 </tr> 47 </thead> 48 </table> 49 <table id="tdList"></table> --> 50 <script type="text/javascript"> 51 var $jq = jQuery.noConflict(); 52 53 function add() { 54 $jq("#add").dialog({ 55 title : "添加数据字典类别", 56 collapsible : true, 57 minimizable : true, 58 maximizable : true, 59 resizable : true, 60 width : 400, 61 height : 260, 62 buttons : [ { 63 text : "保存", 64 iconCls : "icon-add", 65 handler : function() { 66 $jq("#add form").submit(); 67 } 68 }, { 69 text : "取消", 70 iconCls : "icon-cancel", 71 handler : function() { 72 $jq("#add").dialog("close"); 73 } 74 } ] 75 }); 76 }; 77 78 $jq(function () { 79 $jq("#tdList").datagrid({ 80 url: "findAll.do", 81 title: "数据字典列表", 82 loadMsg: ‘正在加载信息...‘, 83 width: "100%", 84 idField: "Id", 85 fitColumns: true, 86 pagination: true, 87 pageSize: 10, 88 pageList: [10, 20, 35, 50], 89 singleSelect: true, 90 rownumbers: true, 91 columns: [[ 92 { field: ‘filename‘, title: ‘文件名‘, width: 120 }, 93 { field: ‘filepath‘, title: ‘文件路径‘, width: 80 }, 94 { 95 field: ‘updatedate‘, title: ‘上传时间‘, width: 80, 96 formatter : formatterdate3 97 } 98 99 ]], 100 toolbar: [{ 101 id: ‘add‘, 102 text: ‘添加‘, 103 iconCls: ‘icon-add‘, 104 handler: add 105 }], 106 onLoadSuccess: function (data) { 107 if (!data.rows) { 108 var body = $jq(this).data().datagrid.dc.body2; 109 body.find(‘table tbody‘).append(‘<tr><td width="‘ + body.width() + ‘" style="height: 25px; text-align: center;">没有数据</td></tr>‘); 110 } 111 } 112 }); 113 114 // TODO 115 // 删除键 116 /* document.onkeydown = function(){ 117 var oEvent = window.event; 118 119 if (oEvent.keyCode == 8) { 120 $jq(".test_box div:last").remove(); 121 } 122 } 123 // 回车键 124 document.onkeydown = function(){ 125 var oEvent = window.event; 126 127 if (oEvent.keyCode == 13) { 128 // 默认选中select下拉的第一个option 129 $jq("#test_select option:first").attr("selected",true); 130 // 让select整体聚焦 131 $jq("#test_select").focus(); 132 } 133 } */ 134 $jq("#select_div").hide(); 135 $jq(".test_box").focus(); 136 // 给.test_box绑定删除事件 137 $jq(".test_box").keydown(function(e){ 138 var oEvent = window.event; 139 if (oEvent.keyCode == 8) { 140 $jq(".test_box div:last").remove(); 141 } 142 }); 143 // 给.test_box绑定回车事件 144 $jq(".test_box").bind("keydown",function(e){ 145 var oEvent = window.event; 146 if (oEvent.keyCode == 13) { 147 // 执行一些操作-这里假设进行了一个ajax请求返回一个值，并把这个值加入到select中 148 var testValue="fuck999"; 149 $jq("#test_select").append(‘<option value="fuck2">‘+testValue+‘</option>‘); 150 // 默认选中select下拉的第一个option 151 $jq("#test_select option:first").attr("selected",true); 152 // 让select整体聚焦 153 $jq("#select_div").show(); 154 $jq("#test_select").focus(); 155 } 156 }); 157 158 $jq("#test_select").keydown(function(e){ 159 var oEvent = window.event; 160 if (oEvent.keyCode == 13) { 161 // 默认选中select下拉的第一个option 162 $jq(this).attr("selected",true); 163 // 让select所在div隐藏 164 $jq(".test_box").append(‘<div style="display:block;margin:0 auto;background:gray;width:50px;float:left;">‘ 165 +$jq("#test_select option:selected").val()+‘</div>‘); 166 alert("fuck"); 167 $jq("#test_select").blur(); 168 $jq("#select_div").hide(); 169 } 170 }); 171 172 173 }); 174 175 176 </script> 177 <div class="test_box" contenteditable="true"> 178 <div style="display:block;margin:0 auto;background:gray;width:50px;float:left;"> 179 fuck1 180 </div> 181 <div style="display:block;margin:0 auto;background:gray;width:50px;float:left;"> 182 fuck2 183 </div> 184 <div style="display:block;margin:0 auto;background:gray;width:50px;float:left;"> 185 fuck3 186 </div> 187 <div style="display:block;margin:0 auto;background:gray;width:50px;float:left;"> 188 fuck4 189 </div> 190 </div> 191 <div id="select_div"> 192 <select id="test_select" multiple> 193 <option value="fuck1">fuck1</option> 194 <option value="fuck2">fuck2</option> 195 <option value="fuck3">fuck3</option> 196 <option value="fuck4">fuck4</option> 197 </select> 198 </div> 199 200 </body> 201 </html>
【JQuery】简单实现div结合select实现div触发select新增option，并通过键盘上下键选中option后追加到div中。
标签：
原文地址：http://www.cnblogs.com/dszhoulonggui2016/p/5406235.html
