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>热门推荐
10 对患者生日祝福语简短
11 结婚祝福语简短装备
12 周岁祝福语学生文案简短
13 订婚领证祝福语简短精辟
14 导师获奖祝福语大全简短
15 新婚购房祝福语简短精辟
16 牛年祝福语简短的爱人
17 送芒果的祝福语简短
18 送给学长毕业祝福语简短