想用javascript做一个select属性对话框

像在.NET里设计FROM时用的那样的没用过

我是想做一个和.NET那种类似的,能添加option.能删除,能上移,能下移,能实现这些功能就行

参考一下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>made by meixx</title>
<script language="javascript">
<!--
function Add(ObjSource,ObjTarget){
for(var i=ObjSource.length-1;i>=0;i--){
if(ObjSource.options[i].selected){
ObjTarget.add(new Option(ObjSource.options[i].text,ObjSource.options[i].value,true));
ObjSource.options.removeChild(ObjSource.options[i]);
}
}
}
function AddAll(ObjSource,ObjTarget){
SelectAll(ObjSource);
Add(ObjSource,ObjTarget);
}
function SelectAll(ObjSource){
for(var i=0;i<ObjSource.length;i++){
ObjSource.options[i].selected=true;
}
}function doSubmit(){
SelectAll(frmDisplay.dltTarget);
//frmDisplay.action="";//设置form 提交的action
alert(frmDisplay.action);
//frmDisplay.submit();//取消注释即可,提交上去的options
}
//->
</script>
</head><body>
<table width="350" border="1" style="border-collapse:collapse " bordercolor="#111111" cellpadding="0" cellspacing="0">
  <tr>
    <td width="150">
<select name="dltSource" size="10" multiple style="width:100% ">
<option value="0">辽宁</option>
<option value="0">黑龙江</option>
<option value="0">吉林</option>
<option value="0">河北</option>
<option value="0">河南</option>
<option value="0">江苏</option>
<option value="0">浙江</option>
<option value="0">海南</option>
<option value="0">福建</option>
<option value="0">山东</option>
<option value="0">青海</option>
<option value="0">宁夏</option>
<option value="0">内蒙古</option>
<option value="0">新疆</option>
<option value="0">陕西</option>
</select>
</td>
    <td width="50" valign="middle">
<p style="width:100%" align="center"><input type="button" value="->" onClick="Add(document.all.dltSource,frmDisplay.dltTarget)" title="添加"></p>
<p style="width:100%" align="center"><input type="button" value="=>" onClick="AddAll(document.all.dltSource,frmDisplay.dltTarget)" title="添加全部"></p>
<p style="width:100%" align="center"><input type="button" value="<-" onClick="Add(frmDisplay.dltTarget,document.all.dltSource)" title="删除"></p>
<p style="width:100%" align="center"><input type="button" value="<=" onClick="AddAll(frmDisplay.dltTarget,document.all.dltSource)" title="删除全部"></p>
</td>
    <td width="150">
<form id="frmDisplay" action="xxx.jsp" method="post" style="margin:0 ">
<select name="dltTarget" size="10" multiple style="width:100% "></select>
</form>
</td>
  </tr>
  <tr>
    <td align="center">作者:梅雪香</td>
    <td align="center">ver:1.0</td>
    <td align="center">
<input type="reset" onClick="javascript:window.location.reload();" value="重置">  
<input type="button" value="提交" onClick="doSubmit()">
</td>
  </tr>
</table></body>
</html>

谢谢 zhaoxiaoyang(梅雪香@深圳),你的这个做的很不错,我在试着如何能利用这个修改成我想要的,十分感谢

下面这个是我参考修改的,分享一下
CODE:
<html>
<head>
<title>Select Properties</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="noindex, nofollow" name="robots">
<script>
var oListText = null;
var oListValue = null;
function initPage()
{
oListText = document.getElementById( 'cmbText' ) ;
oListValue = document.getElementById( 'cmbValue' ) ;
}
function Select( combo )
{
var iIndex = combo.selectedIndex ; oListText.selectedIndex = iIndex ;
oListValue.selectedIndex = iIndex ; var oTxtText = document.getElementById( "txtText" ) ;
var oTxtValue = document.getElementById( "txtValue" ) ; oTxtText.value = oListText.value ;
oTxtValue.value = oListValue.value ;
}function Add()
{
var oTxtText = document.getElementById( "txtText" ) ;
var oTxtValue = document.getElementById( "txtValue" ) ;

AddComboOption( oListText, oTxtText.value, oTxtText.value ) ;
AddComboOption( oListValue, oTxtValue.value, oTxtValue.value ) ; oListText.selectedIndex = oListText.options.length - 1 ;
oListValue.selectedIndex = oListValue.options.length - 1 ; oTxtText.value = '' ;
oTxtValue.value = '' ; oTxtText.focus() ;
}function Modify()
{
var iIndex = oListText.selectedIndex ; if ( iIndex < 0 ) return ; var oTxtText = document.getElementById( "txtText" ) ;
var oTxtValue = document.getElementById( "txtValue" ) ; oListText.options[ iIndex ].innerHTML = oTxtText.value ;
oListText.options[ iIndex ].value = oTxtText.value ; oListValue.options[ iIndex ].innerHTML = oTxtValue.value ;
oListValue.options[ iIndex ].value = oTxtValue.value ; oTxtText.value = '' ;
oTxtValue.value = '' ; oTxtText.focus() ;
}function Move( steps )
{
ChangeOptionPosition( oListText, steps ) ;
ChangeOptionPosition( oListValue, steps ) ;
}function Delete()
{
RemoveSelectedOptions( oListText ) ;
RemoveSelectedOptions( oListValue ) ;
}function SetSelectedValue()
{
var iIndex = oListValue.selectedIndex ;
if ( iIndex < 0 ) return ; var oTxtValue = document.getElementById( "txtSelValue" ) ; oTxtValue.value = oListValue.options[ iIndex ].value ;
}// Moves the selected option by a number of steps (also negative)
function ChangeOptionPosition( combo, steps )
{
var iActualIndex = combo.selectedIndex ; if ( iActualIndex < 0 )
return ; var iFinalIndex = iActualIndex + steps ; if ( iFinalIndex < 0 )
iFinalIndex = 0 ; if ( iFinalIndex > ( combo.options.length - 1 ) )
iFinalIndex = combo.options.length - 1 ; if ( iActualIndex == iFinalIndex )
return ; var oOption = combo.options[ iActualIndex ] ;
var sText = oOption.innerHTML ;
var sValue = oOption.value ; combo.remove( iActualIndex ) ; oOption = AddComboOption( combo, sText, sValue, null, iFinalIndex ) ; oOption.selected = true ;
}// Remove all selected options from a SELECT object
function RemoveSelectedOptions(combo)
{
// Save the selected index
var iSelectedIndex = combo.selectedIndex ; var oOptions = combo.options ; // Remove all selected options
for ( var i = oOptions.length - 1 ; i >= 0 ; i-- )
{
if (oOptions[i].selected) combo.remove(i) ;
} // Reset the selection based on the original selected index
if ( combo.options.length > 0 )
{
if ( iSelectedIndex >= combo.options.length ) iSelectedIndex = combo.options.length - 1 ;
combo.selectedIndex = iSelectedIndex ;
}
}// Add a new option to a SELECT object (combo or list)
function AddComboOption( combo, optionText, optionValue, documentObject, index )
{
var oOption ; if ( documentObject )
oOption = documentObject.createElement("OPTION") ;
else
oOption = document.createElement("OPTION") ; if ( index != null )
combo.options.add( oOption, index ) ;
else
combo.options.add( oOption ) ; oOption.innerHTML = optionText.length > 0 ? optionText : ' ' ;
oOption.value = optionValue ; return oOption ;
}
function GetE( elementId )
{
return document.getElementById( elementId ) ;
}
function SetAttribute( element, attName, attValue )
{
if ( attValue == null || attValue.length == 0 )
element.removeAttribute( attName, 0 ) ; // 0 : Case Insensitive
else
element.setAttribute( attName, attValue, 0 ) ; // 0 : Case Insensitive
}
</script>

<script type="text/javascript">function Ok()
{
if(GetE('txtName').value=='')
{
alert('please write txtName!');
return;
}
var sSize = GetE('txtLines').value ;
if ( sSize == null || isNaN( sSize ) || sSize <= 1 )
sSize = '' ;
var oActiveEl = null;
oActiveEl =document.getElementById(GetE('txtName').value)
if ( !oActiveEl )
{
oActiveEl = document.createElement( 'SELECT' ) ;
document.getElementById('show_slect').appendChild(oActiveEl);
//oActiveEl = document.getElementById('show_slect').InsertElementAndGetIt( oActiveEl ) ;
}

SetAttribute( oActiveEl, 'id' , GetE('txtName').value ) ;
SetAttribute( oActiveEl, 'name' , GetE('txtName').value ) ;
SetAttribute( oActiveEl, 'size' , sSize ) ;
oActiveEl.multiple = ( sSize.length > 0 && GetE('chkMultiple').checked ) ; // Remove all options.
while ( oActiveEl.options.length > 0 )
oActiveEl.remove(0) ; // Add all available options.
for ( var i = 0 ; i < oListText.options.length ; i++ )
{
var sText = oListText.options[i].value ;
var sValue = oListValue.options[i].value ;
if ( sValue.length == 0 ) sValue = sText ; var oOption = AddComboOption( oActiveEl, sText, sValue, document ) ; if ( sValue == GetE('txtSelValue').value )
{
SetAttribute( oOption, 'selected', 'selected' ) ;
oOption.selected = true ;
}
} return true ;
} </script>
</head>
下面还有:

<body style='OVERFLOW: hidden' scroll='no' onload="initPage();">
<table width="400" height="400">
<tr>
<td>
<table width="100%">
<tr>
<td nowrap><span fckLang="DlgSelectName">Name</span> </td>
<td width="100%" colSpan="2"><input id="txtName" style="WIDTH: 100%" type="text"></td>
</tr>
<tr>
<td nowrap><span fckLang="DlgSelectValue">Value</span> </td>
<td width="100%" colSpan="2"><input id="txtSelValue" style="WIDTH: 100%; BACKGROUND-COLOR: buttonface" type="text" readonly></td>
</tr>
<tr>
<td nowrap><span fckLang="DlgSelectSize">Size</span> </td>
<td nowrap><input id="txtLines" type="text" size="2" value=""> <span fckLang="DlgSelectLines">lines</span></td>
<td nowrap align="right"><input id="chkMultiple" name="chkMultiple" type="checkbox"><label for="chkMultiple" fckLang="DlgSelectChkMulti">Allow
multiple selections</label></td>
</tr>
</table>
<br>
<hr style="POSITION: absolute;z-index:5;">
<span style="LEFT: 10px;background:white; POSITION: relative; TOP: -7px;z-index:10;" class="BackColor"> <span fckLang="DlgSelectOpAvail">Available
Options</span> </span>
<table width="100%">
<tr>
<td width="50%"><span fckLang="DlgSelectOpText">Text</span><br>
<input id="txtText" style="WIDTH: 100%" type="text" name="txtText">
</td>
<td width="50%"><span fckLang="DlgSelectOpValue">Value</span><br>
<input id="txtValue" style="WIDTH: 100%" type="text" name="txtValue">
</td>
<td vAlign="bottom"><input onclick="Add();" type="button" fckLang="DlgSelectBtnAdd" value="Add"></td>
<td vAlign="bottom"><input onclick="Modify();" type="button" fckLang="DlgSelectBtnModify" value="Modify"></td>
</tr>
<tr>
<td rowSpan="2"><select id="cmbText" style="WIDTH: 100%" onchange="GetE('cmbValue').selectedIndex = this.selectedIndex;Select(this);"
size="5" name="cmbText"></select>
</td>
<td rowSpan="2"><select id="cmbValue" style="WIDTH: 100%" onchange="GetE('cmbText').selectedIndex = this.selectedIndex;Select(this);"
size="5" name="cmbValue"></select>
</td>
<td vAlign="top" colSpan="2">
</td>
</tr>
<tr>
<td vAlign="bottom" colSpan="2"><input style="WIDTH: 100%" onclick="Move(-1);" type="button" fckLang="DlgSelectBtnUp" value="Up">
<br>
<input style="WIDTH: 100%" onclick="Move(1);" type="button" fckLang="DlgSelectBtnDown"
value="Down">
</td>
</tr>
<TR>
<TD vAlign="bottom" colSpan="4"><INPUT onclick="SetSelectedValue();" type="button" fckLang="DlgSelectBtnSetValue" value="Set as selected value">  
<input onclick="Delete();" type="button" fckLang="DlgSelectBtnDelete" value="Delete"><input type="button" onclick="Ok();" value="add new select" style="margin-left:10px;"/></TD>
</TR>
<tr><td><div id="show_slect"></div></td></tr>
</table>
</td>
</tr>
</table>

</body>
</html>

页面中经常用到下拉列表,下面是个人对于STRUTS中标签使用的一点总结:
STRUTS中的下拉选择列表标签必须嵌套在<html:form>标签中,包括:
1.<html:select>
2.<html:option>
3.<html:options>
4.<html:optionsCollection> 使用时嵌套如下:
<html:select property="ationForm.property">
<html:option>或<html:options>或<html:optionsCollection>
</html:select>
其中property为ActionForm中对应的一个属性. 1.<html:option>
<html:option value="value">displayName</html:option>
其中value为实际使用的值(赋值到ActionForm对应的属性中) displayName页面中显示的信息.
例:<html:option value=""></html:option>显示一个空白选择,值为"". 2..<html:options>
<html:options collection="collection" labelProperty="displayName" property="value"/>
其中collection为一个集合,一般是个ArrayList,displayName为前台显示的名称,value为后台实际使用的值.
例:<html:options collection="arrayList" labelProperty="name" property="id" /> 3..<html:optionsCollection>
<html:optionsCollection property="actionForm.property" label="displayName" value="value"/>
其中property为ActionForm中的一个属性,为一个集合.displayName为前台显示的名称,value为后台实际使用的值.
例:<html:optionsCollection property="listProperty" label="name" value="id" /> 补充一点:如果要从数据库去取数据，一般是在 action 里调用 DAO ，把结果存入一个ArrayList作为 request 的一个属性传到页面上；这时一般用 <html:options .../> 标签.另外，如果数据不从数据库去取，而是代码固定的，则一般把这种放到 ActionForm 里，作为属性在页面上取，这时一般用 <html:optionsCollection ... />

调试易

想用javascript做一个select属性对话框

解决方案 »