js操作html中select和opthion

最新推荐文章于 2023-03-05 09:53:09 发布
最新推荐文章于 2023-03-05 09:53:09 发布
阅读量985 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lianjiao511214/article/details/8628484
版权 
<!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" οnclick="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+"' οnclick='setcurr(this)' οnchange='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的选项中删除其元素。

lianjiao511214
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
封装html的select标签的js操作实例
12-09
代码如下: function BindSelect(id,dataList,fieldtext,fieldValue) { //绑定某一个数据源，fieldtext为需要绑定的文本字段，fieldValue为需要绑定的value字段 var select = $(“#” + id)[0]; for (var i = 0; i &...
option标签选择对应的值作为参数
xiaopeng_thriller的博客
08-06 485
<div class="form-group">性别 <select class="form-control" name="gender"> <option value="0">男</option> <option value="1">女</op...
500行JavaScript代码在前端根据数据生成CAD工程剖面图
vjmap的博客
03-05 1867
用数据生成CAD图，一般采用的ObjectArx对CAD二次开发完成。*ObjectARX*提供了以C++为基础的面向对象的开发环境及应用程序接口，能访问和创建AutoCAD图形数据库。而由于现在懂*C++*的人少，很多人对C++有点望而生畏。则*JavaScript* 是互联网上最流行的脚本语言，用户群体很大。那有没有可能利用JavaScript来进行数据成图？今天和大家聊聊，怎么用500行JavaScript代码，根据数据在前端创建一个Dwg格式的工程剖面图。
js操作select下拉列表
qq_40910788的博客
11-27 1万+
js操作select下拉列表 一，通过已有的值，与select的值比较，并将其设置为默认 select代码： &lt;select name="tigong" id="tigong"&gt; &lt;option value="null"&gt;--全部--&lt;/option&gt; &lt;option value="喜剧"&gt;喜剧&a
html <optgroup> 标签的 label 属性,html optgroup标签是什么意思？关于html optgroup标签的用法和属性实例解析...
weixin_42364551的博客
06-04 874
html optgroup标签是什么意思？关于html optgroup标签的用法和属性实例解析都在这篇文章中，为大家介绍了html optgroup标签的定义和属性实例，还有html optgroup标签的使用方法html optgroup标签的定义和用法： 标签定义选项组。optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。HTML 标签实例...
JS简单操作select和dropdownlist实例
10-25
主要介绍了JS简单操作select和dropdownlist的方法,以实例形式讲述了js针对服务器控件select和dropdownlist的读写操作方法,是js与.net交互的典型应用实例,需要的朋友可以参考下
js实现HTML中Select二级联动的实例
10-18
下面小编就为大家分享一篇js实现HTML中Select二级联动的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
js 操作select和option常用代码整理
12-11
1、获取选中select的value和text,html代码如下： 代码如下: <select id=”mySelect”> ”1″>one</option> ”2″>two</option> ”3″>three</option> </select> 则可通过以下script代码s来获取选中的...
JavaScript操作select元素和option的实例代码
10-22
主要介绍了JavaScript操作select元素和option的实例代码的相关资料,需要的朋友可以参考下
cad web预览
08-07
cad web预览 工具 加载的方法需写在$(document).ready(function(){}) 中 加载转换的图纸文件 图纸文件是四个SVG/JS 文件，由 AutoXchange转换生成 下载地址：http://www.tailormade.com/downloads/ax2017_W32_01.zip >ax2015 -i=mypath/myinputfile.dwg -o=mypath/myoutputfile.js -f=js -size=2800 -prec=1 -ml=0.4 // Open a drawing instance var FileNameNoExtension = "T2-03"; // Name of the drawing file to be loaded , it contains of a set of 4 files, var FileNamePath = "../drawings/"; // Path to the drawing file to be loaded, path is relative from the calling document cvjs_LoadDrawing("floorPlan", FileNamePath, FileNameNoExtension); 加载图纸（需安装转换工具） // Open a drawing instance var FileNameUrl = "http://creator.vizquery.com/City_map.dwg"; var FileNameUrlNoExtension = "City_map"; cvjs_LoadDrawing_Conversion("floorPlan", FileNameUrl, FileNameUrlNoExtension, "", "");
H5后台读写CAD文件
MxCAD_soft的博客
12-22 1208
后台提供mxconvert.js程序，该程序使用JS编程，可以在后台实现读写CAD文件、读取CAD图纸数据等操作
如何在前端通过JavaScript创建修改CAD图形
vjmap的博客
10-18 2617
背景 在之前的博文CAD图DWG解析WebGIS可视化技术分析总结、CAD_DWG图Web可视化一站式解决方案-唯杰地图-vjmap中讲解了如何把CAD的DWG格式的图纸Web可视化的方案，那在Web前端能不能通过JavaScript创建或基于现在的CAD图形进行修改呢？ 现状 创建修改CAD图形，一般是基于AutoCAD进行二次开发，ObjectARX是AutoDesk公司针对AutoCAD平台上的二次开发而推出的一个开发软件包，它提供了以C++为基础的面向对象的开发环境及应用程序接口，能真正快速的
uc/OS II移植中软件中断的理解与应用
bird67的专栏
01-09 1220
1.   软件中断SWISWI(software interrupt)软件中断,由用户定义的中断指令.可以用于用户模式下的程序调用特权操作指令.在实时操作系统中可以通过该机制实现系统调用.一个 SWI 所做的一切就是把模式改变成超级用户并设置 PC 来执行在地址 &08 处的下一个指令!编程异常通常叫做软中断.软中断是通讯进程之间用来模拟硬中断的一种信号通讯方式。中断源发中断请求或软中
HTML中下拉框的简单介绍＜Select＞＜option＞
热门推荐
yangxin_blog的专栏
10-23 11万+
下拉框在生活中应用很广
H5在线CAD后台读写CAD文件
u013725001的专栏
07-15 1439
Node环境安装 这里以一个Vue3工程为例子 首先安装Node下载 | Node.jshttps://nodejs.org/zh-cn/download/请根据电脑操作系统安装对应的安装包 步骤 1 : 双击下载后的安装包，如下所示： 步骤 2 : 点击上图的Run(运行)，将出现如下界面： 步骤 3 : 勾选接受协议选项，点击 next（下一步） 按钮 : 步骤 4 : Node.js默认安装目录为 C:\Program Files\nodejs\, 你可以修改目录，并.
cad多个窗口并排显示_如何将其他CAD图纸中的图块插入到自己的CAD图纸中？
weixin_39942108的博客
11-18 660
浩辰CAD制图软件中提供了多种插入CAD图块的方法，其中最常用的方法是插入（I），可以插入当前CAD图纸中的图块或者某个DWG格式文件作为图块，如果要在当前图中插入其他图中的图块，大家比较常用的方法是打开另一张CAD图纸，从那张图中复制到当前图中。其实，在实际进行CAD绘图的过程中，也可以不用打开另一张图也可以插入图块，并可以将常用的CAD图块保存到工具选项板中，之后可以任意调用。用CAD制图软件...
通过HTML5 JS实现CAD在线看图,CAD浏览器,HTML5画布和Javascript /浏览器开发的性能限制...
weixin_36323601的博客
05-31 2184
有用的工具它使您能够阻止paper.js重新绘制每一帧(使用paper.view.persistence = 1;)。这样，您可以更好地控制要清除的内容并重新绘制：例如，当您移动形状时，可以清除该区域(例如使用本机画布drawRect)，并在移动后更新它(使用path.needsUpdate();)。退税形状相交时出现问题。如果要修改与另一个相交的形状，则必须更新两者。同样的事情，如果第二个形状相...
如何给PDF文件添加自定义图章的方法
cocowei0306的博客
10-29 1997
随着PDF文件的使用越来越广泛，我们对于PDF的操作也越来越熟练，比如有时需要给PDF添加图章，但系统给出的固定图章很难找到合适的，如何才能添加自定义的图章呢？ 这里我们需要用到极速PDF编辑器，先用编辑器打开PDF文档后，点击工具栏“图章”工具右侧的下三角符号可以看到有自定义和内置两种图章形式，依次点击用户自定义中的“设置源文件夹”。 然后点击弹窗“编辑”中自定义图章文件夹输入框后面的“浏览”并添加后点击“确定”即可。（注意：这里是添加文件夹，不是图章文件，所以我们要提前制作好PDF格式的图章文件后，放
html中select和choose的区别
最新发布
06-11
我认为你可能是想问HTML中的`select`和`option`的区别。 `select`是HTML表单中的一个元素，用于创建下拉列表框。它可以包含一个或多个`option`元素，每个`option`元素表示下拉列表中的一个选项。 `option`元素是`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值