java多选框改成左右多选下拉框

在项目维护中，客户提出的新需求。

以前那个用得好好的又要改。

以前是这样的：

要改成这样：

一看。这个就只要改页面加js代码。和控制层没有一毛钱关系。

首先这个控件的代码：

<td class="formLabel">检验项目</td>
                        <td colspan="3">
                          <table>
                          	<tr><td colspan="3">
                          		      <input type="text" οnkeyup="valueChange(this.value,'${sampleEntry.key}')" id="examsName"/>(请输入模糊查询条件)
                          	</td></tr>
                          	<tr>
	                            <spring:bind path="suit.samples[${sampleEntry.key}].examIds">
	                            	    <sql:query dataSource="${dataSource}" var="examResult"> 
		                            	select * from exams where kind_id=${sample.kind.id} and DISABLED='N' order by id
		                            </sql:query>
		                             <td width="250">
					                <select id="selectTable${sampleEntry.key}" οndblclick="dbclickEvent('selectTable${sampleEntry.key}','authTables${sampleEntry.key}')" multiple="multiple" style="width: 295;height: 300">
					                         	<c:forEach var="exams" items="${examResult.rows}">
								        			<option value="${exams.id}">${exams.name}[<fmt:formatNumber value="${exams.cost}" type="currency" pattern="￥.00"/>](${exams.standardNo})</option>
								        </c:forEach>
					                </select>
					                <div style="display:none">
					                	<select id="fakeTable${sampleEntry.key}" multiple="multiple" style="width: 295;height: 300"></select>
					                </div>
					                </td>
						             <td width="50" align="center">
							        	<button type="button" style="width:20px;height: 19px;" οnclick="addTable('selectTable${sampleEntry.key}','authTables${sampleEntry.key}')" >-></button><br><br>
							        	<button type="button" style="width:20px;height: 19px;" οnclick="delTable('authTables${sampleEntry.key}','selectTable${sampleEntry.key}')" ><-</button>
							        </td>
							        <td> 
							        	<select name="${status.expression}" class="tab"
							        	 multiple="multiple" id="authTables${sampleEntry.key}" style="width: 295;height: 300">
							    			<c:forEach var="exams" items="${status.value}">
							    					<sql:query dataSource="${dataSource}" var="e"> 
						                            	                     select * from exams where id=${exams} and kind_id=${sample.kind.id}
						                                                </sql:query>
						                                               <c:forEach var="exam" items="${e.rows}">
								         			    <option value="${exam.id}">${exam.name}[<fmt:formatNumber value="${exam.cost}" type="currency" pattern="￥.00"/>](${exam.standardNo})</option>
								       				</c:forEach>
								       		</c:forEach>
						    			</select>
							               <div style="display:none">
                                                                           <itownet:checkbox name="${status.expression}" value="${status.value}"
                                                                            sql="select id, name as label from exams where kind_id=${sample.kind.id} and DISABLED='N' order by order_no,id"
                                                                               labelField="label" valueField="id"
                                                                               columns="3" style="" styleClass="noborder ${sampleEntry.key}"/></div>
<pre name="code" class="html">							        </td>
	                              
	                            </spring:bind>
                                </tr>
                          </table>
                        </td>

这个方法是添加和修改通用的，所以写代码的时候还注意了页面加载时就有可能是有值的，而且这个项目用的框架比较老不能用ajax。有点小麻烦。

刚开始是左边多选下拉框的页面加载，要注意几点：

   首先是直接从数据库拿集合，sql语句直接写在页面的，需要连接池：

  获取数据库联接数据<%
  Object ds = org.springframework.web.context.support.WebApplicationContextUtils
      .getRequiredWebApplicationContext(application).getBean("dataSource");
  application.setAttribute("dataSource", ds);
  
 %>

这个是直接获取文件：

然后还要排除修改的时候已经选了的那些选项，加载到右边的多选下拉框里去。

实现这些操作的js：

<script type="text/javascript">
	                           	 function addValue(fromId,toId,judge){
	                           	  	$("#"+toId).find("option:selected").each(function(){
								  			$(this).attr("selected",false);
								  		});
										$("#"+fromId).find("option:selected").each(function(){
											var val=this.value;
											if($("#"+toId).find("option[value='"+val+"']").length==0){
												var optionObj=$(this).clone();
												$("#"+toId).append(optionObj.prepend(""));
											}	
											$($("#"+toId).find("option[value='"+val+"']")).attr("selected",true);
											$(this).remove();
											//给隐藏的checkbox选中或取消选中值，以供提交
											$("."+'${sampleEntry.key}').each(function(){
												if(val==this.value){
													$(this).attr("checked",judge);
												}
											});
												
										});
	                           	 }
							    function addTable(fromId,toId){//左移到右
							  		addValue(fromId,toId,true);
							    }
								function dbclickEvent(fromId,toId){//双击添加
									addValue(fromId,toId,true);
								}
							  function delTable(fromId,toId){//右移到左
							  		addValue(fromId,toId,false);
								}
								var oldValue="";
								function valueChange(newValue,number){//模糊查询
									if (oldValue!=newValue){
										var v=newValue;
										$("#selectTable"+number+" option").each(function(){//循环左边多选下拉框
											var sear=new RegExp(v);
											if(!sear.test($(this).attr("innerText"))){//！判断多选下拉框中含文本框的值的那些值
												var val=this.value;
												var optionObj=$(this).clone();
												$("#fakeTable"+number).append(optionObj.prepend(""));
												$($("#fakeTable"+number).find("option[value='"+val+"']")).attr("selected",false);//把不属于的全部移到隐藏的多选下拉框中
												$(this).remove();//并删除
											}
										});
										$("#fakeTable"+number+" option").each(function(){//循环隐藏多选下拉框
											var sear=new RegExp(v);
											if(sear.test($(this).attr("innerText"))){//判断隐藏多选下拉框中含文本框的值的那些值
												var val=this.value;
												var optionObj=$(this).clone();
												$("#selectTable"+number).append(optionObj.prepend(""));
												$($("#selectTable"+number).find("option[value='"+val+"']")).attr("selected",false);//把符合的全部移到显示多选下拉框中
												$(this).remove();//并删除
											}
										});
							        	oldValue = newValue;
							    	}
								}
							  </script>
							  <script type="text/javascript">
								  $(function(){//窗体加载前删除左多选下拉框里右多选下拉框有的值
								  	$("#authTables"+'${sampleEntry.key}'+" option").each(function(){
								  		var val=this.value;
								  		$("#selectTable"+'${sampleEntry.key}'+" option").each(function(){
											if(this.value==val){
												$(this).remove();
											}
								  		});
								  	});
								 });
								
							</script>

因为我的这个是样品中的一个小属性，可能有多个样品，也就是说一个页面上可能有多个这样的下拉框。为了更好的区分，我就给他们加上了样品的id，而且这个js是放在一个样品的里面的，而不是放在页面顶部或是尾部。

还想起一个问题：对于那个模糊查询的，其实按道理正规的不是这么写的，我百度过，因为这个左边下拉框没办法做到又重新进数据库查一次，所有应该要搞个集合保存一下，可是当时这个集合要保存的相当于一个对象的集合，有id和name，最好是用json保存，然后每次模糊查询的时候再到这个json集合里面查询显示出来，好麻烦的。当时已经花了好几天了，于是就想到了一个呆的点的办法：搞个隐藏的多选下拉框，这两个里面的值来回移动，反正另一个看不到，数据不删掉也不会丢，模糊查询以外的就先藏起来，再一次模糊的时候又挑选一次，自我感觉挺方便的。哈哈

嗯嗯。貌似应该就是这些了。因为是写完了很久了才写的这个文章，所以有可能哪里忘了吧。主要是前段时间都没什么空，唉。就这么一个小点点的修改花了我好长时间呢，主要是js写太多了，当时还要一个个去试。好麻烦啊。等我到时候发现了什么问题再加上来吧。

确实忘了点小东西。不过又完善了下。所以直接把改了的放上来了。