Jquery实现的双Select框多选表单提交

目前的项目中使用到了一个双Select框中进行多选的表单提交 现在就做个静态的模拟一下

 

 

主要代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>双Select框互动选择</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
		<script type="text/javascript">
			var str;
			function check(opt){
				str = "."+opt.value;
				if($("#unchecked").children('option').size()>0){
					$("#unchecked").children('option').attr('flag','false');
					$(str).attr('flag','true');
				}
			}
			function unCheck(opt){
				str = "."+opt.value;
				if($("#checked").children('option').size()>0){
					$("#checked").children('option').attr('flag','false');
					$(str).attr('flag','true');
				}
			}
			function select(opt){
				str = "."+opt.value;
				$("#checked").append("<option value='"+opt.value+"' class='"+opt.value+"'>"+$.trim($(str).text())+"</option>");
				$("#unchecked").children('option').remove(str);
			}
			function unSelect(opt){
				str = "."+opt.value;
				$("#unchecked").append("<option value='"+opt.value+"' class='"+opt.value+"'>"+$.trim($(str).text())+"</option>");
				$("#checked").children('option').remove(str);
			}
			function submitMyForm(){
				var form = document.getElementById("myForm");
				for(i=0;i<form.courseIds.length;i++){  
					form.courseIds[i].selected=true;
					alert(form.courseIds[i].value+"被选择");  
				}   
			}
			function resetMyForm(){
				alert($("#checked").children('option').size());
				$.each($("#checked").children('option'), function(i, n){
					alert($.trim($(n).text()));
					alert(n.value);
					$("#unchecked").append("<option value='"+n.value+"' class='"+n.value+"'>"+$.trim($(n).text())+"</option>");
				}); 
				$("#checked").children('option').remove();
			}
		</script>
	</head>

	<body style="text-align: center;">

		<h3>
			请选择你喜欢的水果
		</h3>
		<form id="myForm" name="myForm">
			<!-- 建议id与name全部写一样的 防止浏览器的不和谐 -->


			<table width="80%" bgcolor="green" border="1" align="center">
				<tr>
					<td>
						没有被选择的水果
					</td>
					<td>
						一些图标用来点击选择的
					</td>
					<td>
						您选择的水果
					</td>
				</tr>
				<tr>
					<td>
						<select id="unchecked" style="height: 200px; width: 50px;"
							size="10" onclick="check(this)" ondblclick="select(this);">
							<option value="1" class="1">
								苹果
							</option>
							<option value="2" class="2">
								香蕉
							</option>
							<option value="3" class="3">
								橘子
							</option>
							<option value="4" class="4">
								草莓
							</option>
							<option value="5" class="5">
								梨子
							</option>
						</select>
					</td>
					<td>
						一些图标用来点击选择的
						双击也一样
					</td>
			
					<td>
						<select id="checked" style="height: 200px; width: 50px;" size="10"
							name="courseIds" multiple="multiple" onclick="unCheck(this)"
							ondblclick="unSelect(this);">
						</select>
					</td>
				</tr>
			</table>
			<br />
			<input type="button" value="确定" onclick="submitMyForm();" />
			<input type="button" value="重选" onclick="resetMyForm();" />
		</form>
	</body>
</html>

 

不知道有没有更优化一点的  欢迎指点!

你可能感兴趣的:(JavaScript,html,jquery,浏览器)