学习日记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"//右列表的键值和显示的列表的属性值
 	/>