双复选下拉列表示例

转载 2006年06月23日 11:08:00
<head>
<LINK href='images/css.css' type=text/css rel=stylesheet>
<title>表的排序</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<LINK href="images/common.css" type=text/css rel=stylesheet>
</head>
<script language="JavaScript">


function add_selected_to_right(){
if (document.all.system_table.length>0) {
for (i=0; i<document.all.system_table.length; i++){
if(document.all.system_table.options[i].selected==true){
if(document.all.system_table.options[i].value!=""){
var oOption = document.createElement("OPTION");
oOption.text=document.all.system_table.options[i].text;
oOption.value=document.all.system_table.options[i].value;
document.all.selected_table.add(oOption);
}
}
}
}
}

function del_selected_from_right(){
if (document.all.selected_table.length>0) {
for (i=document.all.selected_table.length-1;i>=0;i--){
if(document.all.selected_table.options[i].selected==true){
if(document.all.selected_table.options[i].value!=""){
document.all.selected_table.options.remove(i);
}
}
}
}
}
function add_all_from_left(){
if (document.all.selected_table.length>0) {
for (i=document.all.selected_table.length-1;i>=0;i--){
if(document.all.selected_table.options[i].value!=""){
document.all.selected_table.options.remove(i);
}
}
}
if (document.all.system_table.length>0) {
for (i=0;i<=document.all.system_table.length-1;i++){
if(document.all.system_table.options[i].value!=""){
var oOption = document.createElement("OPTION");
oOption.text=document.all.system_table.options[i].text;
oOption.value=document.all.system_table.options[i].value;
document.all.selected_table.add(oOption);
}
}
}
}
function del_all_from_right(){
if (document.all.selected_table.length>0) {
for (i=document.all.selected_table.length-1;i>=0;i--){
if(document.all.selected_table.options[i].value!=""){
document.all.selected_table.options.remove(i);
}
}
}
}
function up(){
if (document.all.selected_table.length>0) {
for (i=0; i<document.all.selected_table.length; i++){
if(document.all.selected_table.options[i].selected==true && i!=0){
if(document.all.selected_table.options[i].value!=""){
var oOption = document.createElement("OPTION");
oOption.text=document.all.selected_table.options[i].text;
oOption.value=document.all.selected_table.options[i].value;

document.all.selected_table.options[i].text=document.all.selected_table.options[i-1].text;
document.all.selected_table.options[i].value=document.all.selected_table.options[i-1].value;

document.all.selected_table.options[i-1].text=oOption.text;
document.all.selected_table.options[i-1].value=oOption.value;
document.all.selected_table.options[i-1].selected=true;

}
}
}
}

}
function down(){
if (document.all.selected_table.length>0) {
for (i=document.all.selected_table.length-1; i>=0; i--){
if(document.all.selected_table.options[i].selected==true && i!=document.all.selected_table.length-1){
if(document.all.selected_table.options[i].value!=""){
var oOption = document.createElement("OPTION");
oOption.text=document.all.selected_table.options[i].text;
oOption.value=document.all.selected_table.options[i].value;

document.all.selected_table.options[i].text=document.all.selected_table.options[i+1].text;
document.all.selected_table.options[i].value=document.all.selected_table.options[i+1].value;

document.all.selected_table.options[i+1].text=oOption.text;
document.all.selected_table.options[i+1].value=oOption.value;
document.all.selected_table.options[i+1].selected=true;

}
}
}
}

}

</script>

<BODY>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50">&nbsp;</td>
<td width="500" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="table">系统的表</td>
</tr>
<tr>
<td><select name="system_table" size="20" style="width:200px" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
</table></td>
<td><div align="center">
<input type="button" name="Button" value="添加表" onclick="javascript:add_selected_to_right()">
<br>
<br>
<br>
<br>
<input type="button" name="Submit2" value="移除表" onclick="javascript:del_selected_from_right()">
<br>
<br>
<input type="button" name="Submit2" value="添加所有表" onclick="javascript:add_all_from_left()">
<br>
<br>
<input type="button" name="Submit2" value="移除所有表" onclick="javascript:del_all_from_right()">
<br>
<br>
<input type="button" name="Submit2" value="上移" onclick="javascript:up()">
<br>
<br>
<input type="button" name="Submit2" value="下移" onclick="javascript:down()">
</div></td>
<td width="200" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="table">排序的表</td>
</tr>
<tr>
<td><form name='selected' action="table_taxis.jsp" method="post"><select name="selected_table" size="20" style="width:200px">
</select>
</form></td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>

</BODY>

相关文章推荐

javascript获取单选按钮,复选按钮,下拉列表的值

这两天在学习javascript,把平时用到的获取单选按钮,复选按钮,还有下拉列表值的方法,总结了一下,便于以后查询。 单选,复选,下拉框 .Tab1{ margin-...

jquery操作单选、复选、下拉列表

  • 2011年03月05日 11:34
  • 49KB
  • 下载

JQuery实现三大控件方法,(下拉,单选,复选)

Radion 1.获取选中值,三种方法都可以: $('input:radio:checked').val(); $("input[type...
  • Top_xin
  • Top_xin
  • 2013年08月06日 10:13
  • 2479

Android -- 对话框 Dialog: 确定取消,单选多选,进度显示, 常用控件示例:单选多选框,下拉列表,进度条,自动完成文本框, 菜单显示

1. 对话框示例代码

AJAX示例二(下拉列表联动)

首先从ProductSearchAjax页面获取顶级类别,改变类别时调用changeDrop2方法,通过AJAX提交到getChildCategorys.jsp页面,该页面获取子类别,并组装返回的字符...

后台导航栏下拉列表 css+div 样式代码 及示例下载(灾情分享网)

样式效果图==================================================== 页面代码==================================...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:双复选下拉列表示例
举报原因:
原因补充:

(最多只允许输入30个字)