jquery 实现两Select 标签项互调功能
<html>
<head>
<basehref="<%=basePath%>">
<title>MyJSP'index.jsp'startingpage</title>
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="Thisismypage">
<!--
<linkrel="stylesheet"type="text/css"href="styles.css">
-->
<scripttype="text/javascript"src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
</head>
<SCRIPTLANGUAGE="JavaScript">
<!--
$(document).ready(function(){
$("#toRight").click(function(){
$("#selectLeftoption:selected").each(function(){
$("#selectRight").append("<optionvalue="+$(this).val()+">"+$(this).html()+"</option>");
$(this).remove();
});
});
$("#toLeft").click(function(){
$("#selectRightoption:selected").each(function(){
$("#selectLeft").append("<optionvalue="+$(this).val()+">"+$(this).html()+"</option>");//这个方法是默认在后面添加
//$("#selectLeftoption:first").before("<optionvalue="+$(this).val()+">"+$(this).html()+"</option>");//此种方法是在select前面加内容
//$("#selectLeftoption[value=3]").before("<optionvalue="+$(this).val()+">"+$(this).html()+"</option>");//此种方法是在selectt指定某一行加内容
$(this).remove();
});
});
});
//-->
</SCRIPT>
<BODY>
<table>
<tr>
<td>
<selectsize='10'multipleid="selectLeft"style="width:200px">
<optionvalue="0">JqueryAPI</option>
<optionvalue="1">JavaScript高级程序设计</option>
<optionvalue="2">锋利的jQuery</option>
<optionvalue="3">JavaScript设计模式</option>
<optionvalue="4">JavaScript+DOM高级程序设计</option>
<optionvalue="5">PHP高级程序设计</option>
<optionvalue="6">面向对象程序设计</option>
</select>
</td>
<td>
<inputtype="button"value=">>"id="toRight"/><br/><br/>
<inputtype="button"value="<<"id="toLeft"/>
</td>
<td>
<selectsize='10'multipleid="selectRight"style="width:200px">
</select>
</td>
</tr>
</table>
</BODY>
</HTML>