[img]http://hiphotos.baidu.com/gaoxiang9457/pic/item/abad23d58e0dcfb2a044df51.jpg[/img]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>双下拉多选列表</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
//选择功能
function tianjiafn(){
$("#set1 option:selected").each(function(){
$("#set2").append("<option value='"+$(this).attr("value")+"'>"+$(this).text()+"</option>");
});
$("#set1 option:selected").remove();
}
//移除功能
function yichufn(){
$("#set2 option:selected").each(function(){
$("#set1").prepend("<option value='"+$(this).attr("value")+"'>"+$(this).text()+"</option>");
});
$("#set2 option:selected").remove();}
//添加全部
function tjqbfn(){
$("#set1 option").each(function(){
$("#set2").append("<option value='"+$(this).attr("value")+"'>"+$(this).text()+"</option>");
});
$("#set1 option").remove();
}
//移除全部
function ycqbfn(){
$("#set2 option").each(function(){
$("#set1").append("<option value='"+$(this).attr("value")+"'>"+$(this).text()+"</option>");
});
$("#set2 option").remove();
}
//测试确定
function csqd(){
var tmp='';
$("#set2 option").each(function(){tmp+=$(this).text()+$(this).val()+"\n";});
alert(tmp);
}
//加载事件
$(function(){
//选择按钮事件、左边双击事件
$("#xuanze").bind("click",tianjiafn);
$("#set1").bind("dblclick",tianjiafn);
//移除按钮事件、右边双击事件
$("#yichu").bind("click",yichufn);
$("#set2").bind("dblclick",yichufn);
//添加全部
$("#tjqb").bind("click",tjqbfn);
//删除全部
$("#ycqb").bind("click",ycqbfn);
});
</script>
</head>
<body style="text-align: center;margin:0px;padding:0px;">
<form id="myForm" name="myForm">
<table border="1" align="center">
<tr>
<td>
<select id="set1" multiple="multiple" style="height: 200px; width: 200px;"
size="10">
<option value="1" class="1">
主汽压力</option>
<option value="2" selected class="2">
主汽温度 </option>
<option value="3" class="3">
机真空度 </option>
<option value="4" class="4">
机排烟温度 </option>
<option value="5" class="5">
炉汽包水位 </option>
<option>厂用电率</option>
<option>再热汽温</option>
<option>凝汽器真空</option>
<option>补水率</option>
<option>排烟温度</option>
<option>烟气含氧量</option>
<option>凝汽器端差</option>
<option>炉膛负压</option>
<option>汽包水位</option>
<option>各条母线电压</option>
<option>发电机风温</option>
<option>氢气露点湿度</option>
<option>分离器出口温度</option>
<option>回料器立管压力</option>
</select>
</td>
<td><table align=center>
<tr>
<td><input id = "xuanze" type=button value='选择'/>
</td>
</tr>
<tr>
<td><input id="yichu" name="button32" type=button value='移除'/></td>
</tr>
<tr>
<td><input id="tjqb" type=button value='添加全部'/></td>
</tr>
<tr>
<td><input id="ycqb" type=button value='移除全部'/></td>
</tr>
</table>
</td>
<td>
<select id="set2" style="height: 200px; width:200px;" size="10"
name="courseIds" multiple="multiple">
</select>
</td>
</tr>
</table>
<br />
<input type="button" value="确定" οnclick="csqd();" />
<input type="button" value="重选" onClick="$('#ycqb').click()"/>
</form>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>双下拉多选列表</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
//选择功能
function tianjiafn(){
$("#set1 option:selected").each(function(){
$("#set2").append("<option value='"+$(this).attr("value")+"'>"+$(this).text()+"</option>");
});
$("#set1 option:selected").remove();
}
//移除功能
function yichufn(){
$("#set2 option:selected").each(function(){
$("#set1").prepend("<option value='"+$(this).attr("value")+"'>"+$(this).text()+"</option>");
});
$("#set2 option:selected").remove();}
//添加全部
function tjqbfn(){
$("#set1 option").each(function(){
$("#set2").append("<option value='"+$(this).attr("value")+"'>"+$(this).text()+"</option>");
});
$("#set1 option").remove();
}
//移除全部
function ycqbfn(){
$("#set2 option").each(function(){
$("#set1").append("<option value='"+$(this).attr("value")+"'>"+$(this).text()+"</option>");
});
$("#set2 option").remove();
}
//测试确定
function csqd(){
var tmp='';
$("#set2 option").each(function(){tmp+=$(this).text()+$(this).val()+"\n";});
alert(tmp);
}
//加载事件
$(function(){
//选择按钮事件、左边双击事件
$("#xuanze").bind("click",tianjiafn);
$("#set1").bind("dblclick",tianjiafn);
//移除按钮事件、右边双击事件
$("#yichu").bind("click",yichufn);
$("#set2").bind("dblclick",yichufn);
//添加全部
$("#tjqb").bind("click",tjqbfn);
//删除全部
$("#ycqb").bind("click",ycqbfn);
});
</script>
</head>
<body style="text-align: center;margin:0px;padding:0px;">
<form id="myForm" name="myForm">
<table border="1" align="center">
<tr>
<td>
<select id="set1" multiple="multiple" style="height: 200px; width: 200px;"
size="10">
<option value="1" class="1">
主汽压力</option>
<option value="2" selected class="2">
主汽温度 </option>
<option value="3" class="3">
机真空度 </option>
<option value="4" class="4">
机排烟温度 </option>
<option value="5" class="5">
炉汽包水位 </option>
<option>厂用电率</option>
<option>再热汽温</option>
<option>凝汽器真空</option>
<option>补水率</option>
<option>排烟温度</option>
<option>烟气含氧量</option>
<option>凝汽器端差</option>
<option>炉膛负压</option>
<option>汽包水位</option>
<option>各条母线电压</option>
<option>发电机风温</option>
<option>氢气露点湿度</option>
<option>分离器出口温度</option>
<option>回料器立管压力</option>
</select>
</td>
<td><table align=center>
<tr>
<td><input id = "xuanze" type=button value='选择'/>
</td>
</tr>
<tr>
<td><input id="yichu" name="button32" type=button value='移除'/></td>
</tr>
<tr>
<td><input id="tjqb" type=button value='添加全部'/></td>
</tr>
<tr>
<td><input id="ycqb" type=button value='移除全部'/></td>
</tr>
</table>
</td>
<td>
<select id="set2" style="height: 200px; width:200px;" size="10"
name="courseIds" multiple="multiple">
</select>
</td>
</tr>
</table>
<br />
<input type="button" value="确定" οnclick="csqd();" />
<input type="button" value="重选" onClick="$('#ycqb').click()"/>
</form>
</body>
</html>
1949
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
