欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-13 10:37:25 

<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="https://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>

上一篇： Spring Cloud OpenFeign 声明式服务调用

下一篇： jquery获得同源iframe内body下标签的值的方法教程

推荐阅读