学习日记2.9

双选择列表框的用法.

 

效果图如附件图所示

 

1.使用iterator标签.

 

<div class="jjexample"><select id="select1" class="jjexample" multiple="multiple"> <display:table> <s:iterator value="major.studyStyles" id="major_studystyle"> //需要迭代的值和ID值 <option><display:setProperty name="paging.banner.items_name" value="studystyles"/></option> </s:iterator> </display:table> </select> <a href="#" id="add" class="jjexample">remove &gt;&gt;</a> </div> <div class="jjexample"> <select id="select2" class="jjexample" multiple="multiple" > <s:iterator value="studystyles" id="studystyle"> <option><s:property value="#studystyle.name" /></option> </s:iterator> </select> </div> <div style="clear: both"></div>

 2.使用select标签

<div class="jjexample"><s:select key="major.studyStyles" list="major.studyStyles" listKey="major.studyStyles" listValue="name" value="%{major.studyStyles.name}" name="select1" multiple="true" cssClass="jjexample" /> <a href="#" id="add" class="jjexample">remove &gt;&gt;</a> </div> <div class="jjexample"><s:select key="studystyles" list="studystyles" listKey="studyStyles" listValue="name" value="%{studystyles.name}" name="select2" multiple="true" cssClass="jjexample"/> <a href="#" id="remove" class="jjexample">&lt;&lt;add</a></div> <div style="clear: both"></div>

 以上两种需要调用css和javascript代码 代码如下.

 

<script type="text/javascript" src="<c:url value='/scripts/jquery.js'/>"></script> <script src="/misc/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $().ready(function() { $('#add').click(function() { return !$('#majorForm_select1 option:selected').remove().appendTo('#majorForm_select2'); }); $('#remove').click(function() { return !$('#majorForm_select2 option:selected').remove().appendTo('#majorForm_select1'); }); }); </script> <style name= "jjexample" type="text/css"> a.jjexample { display: block; border: 1px solid #aaa; text-decoration: none; background-color: #fafafa; color: #123456; margin: 2px; clear:both; } div.jjexample { float:left; text-align: center; margin: 10px; } select.jjexample { width: 100px; height: 80px; } </style>

 

3. 使用optiontransferselect标签.

 

  strut2的双列表选择标签.

 

<s:optiontransferselect label="StudyStyles" name="leftSideCartoonCharacters" list="major.studyStyles" //左列表的值:数组,链表 listKey="id" listValue="name"//左列表的键值和显示的列表的属性值 doubleName="rightSideCartoonCharacters" doubleList="studystyles"//右列表的值:数组,链表 doubleListKey="id" doubleListValue="name"//右列表的键值和显示的列表的属性值 />