jquery 实现两Select 标签项互调示例代码

前端技术 2023/09/04 JavaScript 
<html>
<head>
<base href=\"<%=basePath%>\">

<title>My JSP \'index.jsp\' starting page</title>
<meta http-equiv=\"pragma\" content=\"no-cache\">
<meta http-equiv=\"cache-control\" content=\"no-cache\">
<meta http-equiv=\"expires\" content=\"0\"> 
<meta http-equiv=\"keywords\" content=\"keyword1,keyword2,keyword3\">
<meta http-equiv=\"description\" content=\"This is my page\">
<!--
<link rel=\"stylesheet\" type=\"text/css\" href=\"styles.css\">
-->
<script type=\"text/javascript\" src=\"http://code.jquery.com/jquery-1.4.1.min.js\"></script>
</head>


<SCRIPT LANGUAGE=\"JavaScript\">
<!--
$(document).ready(function() {
$(\"#toRight\").click(function(){
$(\"#selectLeft option:selected\").each(function(){
$(\"#selectRight\").append(\"<option value=\" + $(this).val() + \">\" + $(this).html() + \"</option>\");
$(this).remove();
});
});

$(\"#toLeft\").click(function(){
$(\"#selectRight option:selected\").each(function(){
$(\"#selectLeft\").append(\"<option value=\" + $(this).val() + \">\" + $(this).html() + \"</option>\");//这个方法是默认在后面添加
//$(\"#selectLeft option:first\").before(\"<option value=\" + $(this).val() + \">\" + $(this).html() + \"</option>\"); //此种方法是在select前面加内容
//$(\"#selectLeft option[value=3]\").before(\"<option value=\" + $(this).val() + \">\" + $(this).html() + \"</option>\"); //此种方法是在selectt指定某一行加内容
$(this).remove();
});
});

});
//-->
</SCRIPT>


<BODY>
<table>
<tr>
<td>
<select size=\'10\' multiple id=\"selectLeft\" style=\"width:200px\">
<option value=\"0\">Jquery API</option>
<option value=\"1\">JavaScript高级程序设计</option>
<option value=\"2\">锋利的jQuery</option>
<option value=\"3\">JavaScript 设计模式</option>
<option value=\"4\">JavaScript+DOM高级程序设计</option>
<option value=\"5\">PHP高级程序设计</option>
<option value=\"6\">面向对象程序设计</option>
</select>
</td>
<td>
<input type=\"button\" value=\" >> \" id=\"toRight\" /><br /><br />
<input type=\"button\" value=\" << \" id=\"toLeft\" />
</td>
<td>
<select size=\'10\' multiple id=\"selectRight\" style=\"width:200px\">
</select>
</td>
</tr>
</table>
</BODY>
</HTML>

本文地址：https://www.stayed.cn/item/9588

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案