js操作html中select和opthion

来源：互联网发布：淘宝童装棉衣编辑：程序博客网时间：2024/05/16 09:52
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>        <title>lianjiao</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"><meta http-equiv="content-type" content="text/html;charset=gbk" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>   </head>        <body>    <form id="form1" name="form1" method="post" action="">    <table width="609" height="455" align="center" >      <tr>      <td colspan="6" align="center"> 课表(总共有需要排课的班级：<span id="class_count" style="color:red">8</span>个) </td>      </tr>      <tr>      <td colspan="6"><input value="课表编号："  type="hidden" name=""  value="">    课表名称：<input  type="text" name=""  value=""></td>      </tr>      <tr >        <td width="64" valign="center" ><p > </p></td>        <td width="103" valign="center" ><p >周一 </p></td>        <td width="103" valign="center" ><p >周二 </p></td>        <td width="104" valign="center" ><p >周三 </p></td>        <td width="104" valign="center" ><p >周四 </p></td>        <td width="103" valign="center" ><p >周五 </p></td>      </tr>      <tr >        <td width="64"  valign="center" ><p >1—2 </p></td>        <td width="103" valign="center" ><p id="11">,呃呃呃呃呃,eeee</p></td>        <td width="103" valign="center" ><p id="12">,英语班,新加课程,呃呃呃呃呃,土木02,CAD班</p></td>        <td width="104" valign="center" ><p id="13">,英语班,新加课程,呃呃呃呃呃,eeee,土木02,CAD班</p></td>        <td width="104" valign="center" ><p id="14">,英语班,新加课程,呃呃呃呃呃,eeee,土木02,CAD班</p></td>        <td width="103" valign="center" ><p id="15">,英语班,新加课程,呃呃呃呃呃,eeee,土木02,CAD班</p></td>      </tr>      <tr >        <td width="64" valign="center" ><p >3—4 </p></td>        <td width="103" valign="center" ><p id="21">,呃呃呃呃呃,eeee,fefde,土木02,建工01,CAD班</p></td>        <td width="103" valign="center" ><p id="22">,英语班,新加课程,eeee,fefde,建工01</p></td>        <td width="104" valign="center" ><p id="23">,英语班,新加课程,eeee,fefde,建工01,CAD班</p></td>        <td width="104" valign="center" ><p id="24">,英语班,新加课程,呃呃呃呃呃,eeee,fefde,建工01,CAD班</p></td>        <td width="103" valign="center" ><p id="25">,英语班,新加课程,呃呃呃呃呃,eeee,fefde,土木02,建工01,CAD班</p></td>      </tr>      <tr >        <td width="64" valign="center" ><p >5—6 </p></td>        <td width="103" valign="center" ><p id="31">,呃呃呃呃呃,eeee,建工01,CAD班</p></td>        <td width="103" valign="center" ><p id="32">,英语班,新加课程,呃呃呃呃呃,eeee,土木02,建工01,CAD班</p></td>        <td width="104" valign="center" ><p id="33">,英语班,新加课程,呃呃呃呃呃,eeee,fefde,建工01</p></td>        <td width="104" valign="center" ><p id="34">,英语班,新加课程,eeee,土木02,建工01,CAD班</p></td>        <td width="103" valign="center" ><p id="35">,英语班,新加课程,呃呃呃呃呃,eeee,建工01,CAD班</p></td>      </tr>      <tr >        <td width="64" valign="center" ><p >7—8 </p></td>        <td width="103" valign="center" ><p id="41">,英语班,呃呃呃呃呃,eeee,土木02,建工01,CAD班</p></td>        <td width="103" valign="center" ><p id="42">,新加课程,呃呃呃呃呃,eeee,土木02,建工01,CAD班</p></td>        <td width="104" valign="center" ><p id="43">,新加课程,呃呃呃呃呃,eeee,fefde,土木02,建工01,CAD班</p></td>        <td width="104" valign="center" ><p id="44">,新加课程,呃呃呃呃呃,eeee,土木02,建工01</p></td>        <td width="103" valign="center" ><p id="45">,新加课程,呃呃呃呃呃,eeee,土木02,建工01,CAD班</p></td>      </tr>      <tr >        <td width="64" valign="center" ><p >7—8 </p></td>        <td width="103" valign="center" ><p id="51">,英语班,呃呃呃呃呃,eeee,fefde,土木02,建工01,CAD班</p></td>        <td width="103" valign="center" ><p id="52">,新加课程,呃呃呃呃呃,eeee,fefde,土木02,建工01,CAD班</p></td>        <td width="104" valign="center" ><p id="53">,新加课程,呃呃呃呃呃,eeee,fefde,土木02,建工01,CAD班</p></td>        <td width="104" valign="center" ><p id="54">,新加课程,呃呃呃呃呃,eeee,fefde,土木02,建工01,CAD班</p></td>        <td width="103" valign="center" ><p id="55">,新加课程,呃呃呃呃呃,eeee,fefde,土木02,建工01,CAD班</p></td>      </tr>      <td colspan="6" align="center"><input type="button" onclick="save()" value="保存"></input></td>    </table>      </form>      <script type="text/javascript">     var img_no="";var cache_class =  new Array();//伪二维数组var cache_curr="";var class_count = 0;   var list_class =  new Array();class_count = $("#class_count").html();for(i=1;i<=5;i++){for(j=1;j<=5;j++){cache_class[i*10+j]="";//初始化缓存空间var data_str;var datamb =  new Array();var data;data_str = $("#"+""+i+j).html()if(data_str==null){datamb[0]=""; datamb[1]="asd"; }else{datamb = data_str.split(","); }   data = "<select id='se"+i+j+"' onclick='setcurr(this)' onchange='modflyc(this,"+i+","+j+")' width='100px'>";   if(datamb.length<1){   $("#"+""+i+j).html(data);   }else{      for(ii=0;ii<datamb.length;ii++){   data +="<option>"+datamb[ii]+"</option>";   }   data +="</select>"$("#"+""+i+j).html(data);}}}/** 保存方法*/function save(){var str="";var course=new Array(); var count=0;var have=0;var flg=0;var ii=0;jj=0;for(i=1;i<=5;i++){for(j=1;j<=5;j++){str += $("#"+""+i+j).find("#se").val();str+="  ";course[count++]=$("#"+"se"+i+j).val();}}alert(1);for(ii=0;ii<25;ii++){for(jj=0;jj<25;jj++){if(jj!=ii){if(course[ii].length>1){if(course[ii]==course[jj]){if(flg==0){alert(course[jj]+" 排课冲突，保存失败");flg=1;}}}}}if(course[ii].length>1)have++;}if(flg==0){if(have==$("#type").val()){if (confirm("恭喜，排课成功，总共有 "+$('#type').val()+" 个班级，排了 "+have+" 班级！ 确定保存并发布排课结果吗？")) return publish();else return false;}else{if (confirm("排课异常，总共有 "+$('#type').val()+" 个班级，排了 "+have+" 班级！ 确定保存并发布排课结果吗？")) return publish();else return false;}}}/**  保存前获取每个选项的值*/function publish(){for(i=1;i<=5;i++){for(j=1;j<=5;j++){ $("#"+"c"+i+j).val($("#"+"se"+i+j).val());}}$('#type').val("publish");$('#form1').submit();}/**  每个选项被单击选中的事件*/function setcurr(obj){cache_curr = $(obj).val();}/**  恢复删除的元素*/function undel(class_name){var item =  new Array();var itemdata="";for(i=1;i<=5;i++){for(j=1;j<=5;j++){itemdata = cache_class[i*10+j];cache_class[i*10+j]="";//清空缓存，修改后重新组装item = itemdata.split(";");for(ii=0;ii<item.length;ii++){if(item[ii]==class_name){//追加option元素，并且删除缓存中的元素//只负责追加if(item[ii]!="")$("#se"+i+""+j).append("<option>"+class_name+"</option>");}else{//只负责删除(删除即 去出item[ii]==class_name)if(item[ii]!="")cache_class[i*10+j]+=";"+item[ii];}}}}}/**  修改剩余未排课班级个数*/function modflyclasscount(){var have=0;for(i=1;i<=5;i++){for(j=1;j<=5;j++){if($("#se"+i+""+j).val().length>1)have++;}}if(class_count==have){have=0+"";}else{have = class_count-have;}$("#class_count").html(have);}/**  每个选项值更改的触发事件*/function modflyc(obj,posi,posj){modflyclasscount();var class_name = $(obj).val();if(class_name==""){if(cache_curr!="")if(class_name!=cache_curr){//alert(cache_curr);//从缓存中取得元素重新添加至原来位置undel(cache_curr);}}else{//alert(class_name);if(class_name!=cache_curr)undel(cache_curr);for(i=1;i<=5;i++){for(j=1;j<=5;j++){if(i==posi && j==posj){//它自己}else{var temp = $("#se"+i+""+j+" option[text='"+class_name+"']").val();//alert(temp+"   "+class_name);if(temp==class_name || temp==""){//ie 下无法获取temp的值，它只有undefined和空字符这两种结果cache_class[i*10+j]+=";"+class_name;//把欲删除的值，按照其位置缓存起来，并以分号分隔$("#se"+i+""+j+" option[text='"+class_name+"']").remove();//缓存删除的元素（ij,class_name）//alert('shan chu yuan su ');}else{//alert(i+""+j);}}}}}}   </script>  </body></html>
另外引用了jquery-1.2.6.js，这是一个jquery操作select的合集，主要实现的功能，就是当在一个select中选择选项后就，在其他select的选项中删除其元素。