双复选下拉列表示例

转载 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>

HTML5文本域,单选框、复选框,下拉列表框,提交、重置按钮的设置,label标签

文本域,支持多行文本输入 当用户需要在表单中输入大段文字时,需要用到文本输入域。 语法:   rows="行数"cols="列数">文本 1、标签是成对出现的,以开始,以结束。 ...
  • xinianbuxiu
  • xinianbuxiu
  • 2016年12月08日 23:37
  • 1657

Qt 创建带有复选框的下拉树

Qt 的自定义组件可以将任何自己想要的效果表达出来。这篇文件就讲解下如何在Qt 下创建 带有复选框的树,这个数是点击按钮弹出来的。效果如下图所示: 这个组件需要有: Q...
  • NewBorad
  • NewBorad
  • 2014年07月27日 21:10
  • 1730

入门HTML之复选框 单选框 下拉列表

复选框(Checkbox)  在一个表单里的所有多选框可以有一个或多个被选中。 复选框 请选择您喜欢的音乐: 摇滚 爵士 流行 单选框(RadioButton)...
  • u011333814
  • u011333814
  • 2013年12月18日 20:53
  • 3376

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

这两天在学习javascript,把平时用到的获取单选按钮,复选按钮,还有下拉列表值的方法,总结了一下,便于以后查询。 单选,复选,下拉框 .Tab1{ margin-...
  • mengxiangxingchen
  • mengxiangxingchen
  • 2014年01月08日 14:58
  • 503

Html之单选_复选_下拉列表_textarea_实例

1 表单实例手把手 用户注册页面表单实例 用 户 名: 密    码: 确认密码: 您的年龄层是? 16周岁以下 17-22周岁 23-28周岁 ...
  • jintianhen1
  • jintianhen1
  • 2013年10月11日 11:05
  • 1709

伊兰COMBO (强大的Ext单多选下拉列表控件;带详细示例)

  • 2012年12月21日 13:55
  • 13KB
  • 下载

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

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

非容器组件(下拉,复选) 菜单组件

非容器组件: 用户名JLabel 用户名的输入框JTextField //密码JLabel 密码框JPasswordField 性别--单选框JLabel 选...
  • love_zjl
  • love_zjl
  • 2016年12月17日 22:41
  • 110

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

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

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

1. 对话框示例代码
  • xj626852095
  • xj626852095
  • 2014年04月10日 16:44
  • 1128
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:双复选下拉列表示例
举报原因:
原因补充:

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