实现动态页面传值 options动态显示数据-优快云博客

本文介绍了一个简单的人员选择器实现方案，通过JavaScript实现了人员从未选中到已选中的转移功能。用户可以轻松地将选项从一个列表移至另一个列表，方便进行人员挑选。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vol_Outlay_ChooseSure <link href="../css/index.css" rel="stylesheet" type="text/css">

选择组	未选人员		已选人员
	姚明刘翔李小双刘德华黎明张学友王晶张艺谋郑秀文杰克逊	<< >>

<html>

<head>

<title>
Vol_Outlay_ChooseSure

</title>

<linkhref="../css/index.css"rel="stylesheet"type="text/css"/>

</head>

<bodybgcolor="#ffffff"onLoad="removeOption(SelectedItem);">

<tablewidth="80%"height="47%"border="1"cellpadding="0"cellspacing="0"align="center">

<tr>

<tdwidth="25%"height="34"align="right"valign="bottom"class="text">选择组</td>

<tdwidth="12%"height="34"align="right"valign="bottom"class="text"></td>

<tdwidth="%"height="34"align="center"valign="bottom"class="text">未选人员</td>

<tdwidth="12%"></td>

<tdwidth="25%"valign="bottom"class="text">已选人员</td>

</tr>

<tr><td></td><td></td>

<tdheight="162"align=""valign="top">

<selectname="SelectedItem"style="width:100%"id="SelectedItem"size="12"multiple="true">

<option>姚明</option>

<option>刘翔</option>

<option>李小双</option>

<option>刘德华</option>

<option>黎明</option>

<option>张学友</option>

<option>王晶</option>

<option>张艺谋</option>

<option>郑秀文</option>

<option>杰克逊</option>

</select>

</td>

<tdalign="center"valign="top"><br/>

<br/>

<br/>

<br/>

<buttononClick="MoveSingleItem(WaitSelectItem,SelectedItem)"class="bn"><<</button>

<br/>

<br/>

<br/>

<buttononClick="MoveSingleItem(SelectedItem,WaitSelectItem)"class="bn">>></button></td>

<tdvalign="top"><selectname="WaitSelectItem"style="width:100%"size=12multiple="true">

</select></td>

</tr>

<tr>

<tdalign="center"colspan="5"></td>

</tr>

<tr>

<tdalign="center"colspan="5">

<inputtype="button"name="chooseOk"class="bn"value="确定"onClick="re(WaitSelectItem);"/>

<inputtype="button"name="reset"class="bn"value="取消"onClick="javascript:window.close();"/></td>

</tr>

</table>

</body>

</html>

<scriptlanguage="javascript"type="text/javascript">
functionMoveSingleItem(sel_source,sel_dest){

if(sel_source.selectedIndex==-1){

if(sel_source.options.length>0){

varSelectedText=sel_source.options[sel_source.options.length-1].text;

varobjItemValue=sel_source.options[sel_source.options.length-1].value;
sel_source.options.remove(sel_source.options.length-1);
sel_dest.options.add(newOption(SelectedText,objItemValue));
}
}else{

for(vari=sel_source.options.length-1;i>=0;i--){

if(sel_source.options[i].selected==true){

varSelectedText=sel_source.options[i].text;

varobjItemValue=sel_source.options[i].value;
sel_source.options.remove(i);
sel_dest.options.add(newOption(SelectedText,objItemValue));
}
}
}
}
functionre(sel_dest){

window.returnValue=getSelectedValue(sel_dest);
window.close();
}
functiongetSelectedValue(sel_dest){

vararr=newArray();

for(vari=sel_dest.options.length-1;i>=0;i--){
arr[i]=sel_dest.options[i].value;
}
returnarr;
}
functionremoveOption(sel){
sel.options.remove(0);
}

</script>