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.selected=true;alert(form.courseIds.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"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" ondblclick="unSelect(this);"></select></td></tr></table><br /><input type="button" value="确定"/><input type="button" value="重选"/></form></body></html>
不知道有没有更优化一点的 欢迎指点！
页:
[1]