js基础运用 day 11

最新推荐文章于 2024-07-20 11:30:56 发布

木木木是我

最新推荐文章于 2024-07-20 11:30:56 发布

阅读量157

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/lx678111/article/details/81239722

版权

Javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

DOM——有关组合框组件——下拉菜单select用法演示

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM——有关组合框组件——下拉菜单select用法演示</title>
<style type="text/css">
    .clrclass{
      width:50px;
      height:50px;
      float:left;
      margin-right: 30px;    
     
     #text{
      clear:left;
     }
    }
</style>
<script type="text/javascript">
   function changeColor(oDiv){
   	 var objText=document.getElementById("text");
	 //把oDiv的背景色取出来，赋给oDivText.style.color
	 var clr=oDiv.style.backgroundColor;
	 objText.style.color=clr;
	 
	 /*技术延伸: 这里演示的是更改oDivText对象的style.color属性
		如果要切换图片，只要更改oImg对象的"src"属性就可以。
	    其它dom对象的其它属性，举一反三。  */
   }
</script>
</head>
<body>
<h3>select组件用法演示</h3>
<div class="clrclass" id="clr1" style="background-color:red" onclick="changeColor(this)"></div>
<div class="clrclass" id="clr2" style="background-color:green" onclick="changeColor(this)"></div>
<div class="clrclass" id="clr3" style="background-color:blue" onclick="changeColor(this)"></div>
<div id="text">
   显示效果的文字<br/>
   显示效果的文字<br/>
   显示效果的文字<br/>
</div>
</body>
</html>

版本2

演示一下select组件的常用用法：

options集合: 获取 select 对象中 option 对象的集合。

selectedIndex属性：选中选项位于 select 对象中的位置。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>DOM——有关组合框组件——下拉菜单的演示</title>
        <style type="text/css">
            #text {
                margin: 20px;
            }
        </style>
        <script type="text/javascript">
            function demo(){
              var oSelect = document.getElementsByName("selectColor")[0];
			   var val=oSelect.value;
			   alert("1: "+val);
			   
			   /*演示一下select组件的常用用法
				 * options集合: 获取 select 对象中 option 对象的集合。 
				   selectedIndex属性： 选中选项位于 select 对象中的位置。 
				*/
				//遍历所有选项
				var arr=oSelect.options;
				for(var x=0;x<arr.length;x++){
					var oOption=arr[x];
					alert(oOption.value);
				}
				alert("2:" +arr[oSelect.selectedIndex].value  );//select组件的当前值---法2
            }
			
			function changeColor(oSelect){
				var val=oSelect.value;
				document.getElementById("text").style.color=val;
			}
        </script>
    </head>
    <body>
        <h3>select组件用法演示</h3>
        
		<button onclick="demo();">select组件常用用法演示</button>
		<br/>
        <select name="selectColor" onchange="changeColor(this)">
            <option value="black">--选择颜色--</option>
            <option value="red">红色</option>
            <option value="green">绿色</option>
            <option value="blue">蓝色</option>
        </select>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <select name="selectColor2" style="width:50px;" onchange="changeColor(this)">
            <option value="black" style="background-color:black"></option>
            <option value="red" style="background-color:red"></option>
            <option value="green" style="background-color:green"></option>
            <option value="blue" style="background-color:blue"></option>
        </select>
        <div id="text">
            显示效果的文字
            <br/>
            显示效果的文字
            <br/>
            显示效果的文字
            <br/>
        </div>
        <hr/>
    </body>
</html>

select组件用法演示--二级下拉菜单联动

<!DOCTYPE html>
<html>
  <head>
    <title>DOM--有关组合框组件--下拦菜单的演示</title>
	
    <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=UTF-8">
    
   <style type="text/css">
			select{
				width:100px;
			}
		</style>
		<script type="text/javascript">
		//我们以后正式开发时，省份和城市数据来自后台，现在讲解纯前端技术，直接赋值一些常量数据
		//1城市数据为arr
		function changeCity1(oSelect){
			var collCities = [['选择城市'], ['朝阳区', '海淀区', '东城区', '西城区'], ['益阳', '长沙', '株洲', '常德'], ['杭州', '宁波', '金华', '温州'], ['南昌', '九江', '萍乡', '上饶']];
			var idx = oSelect.selectedIndex;
			var arrCities = collCities[idx];
			//alert(arrCities);
			var oSelCity = document.getElementsByName("selCity")[0];
			//alert(oSelCity.name);
			
			//先清除旧的城市选项
			/*法1 ---注意，oSelCity.options.length是动态变化的
			   for(var x=1;x<oSelCity.options.length;){
					oSelCity.removeChild( oSelCity.options[x] );
				}
				*/
			
			//法2
				oSelCity.length=1; //直接把组件的选项集合长度设为1，相当于实现删除其余选项的效果
				
				//再添加当前省份的城市选项: <option value="">...</option>
				for(var x=0; x<arrCities.length; x++){
					var oOption = document.createElement("option");
					oOption.innerHTML=arrCities[x];
					//oOption.value=...
					oSelCity.appendChild(oOption);
				}
		}
		</script>

  </head>
  
 <body>
   <h3>select组件用法演示--二级下拉菜单联动</h3>
		
		<select name="selProv" onchange="changeCity1(this);">
			<option value="none">--选择省份--</option>
			<option value="beijing">北京</option>
			<option value="hunan">湖南</option>
			<option value="zhejiang">浙江</option>
			<option value="jiangxi">江西</option>
		</select>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<select name="selCity">
			<option value="none">选择城市</option>
		</select>
  </body>
</html>

DOM--动态表单(以添加附件为例)技术的演示

<!DOCTYPE html>
<html>
  <head>
    <title>DOM--动态表单(以添加附件为例)技术的演示</title>
	
    <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=UTF-8">
    
    <style type="text/css">
			table a:link, table a:visited{
				text-decoration:none;
				color:#8000ff;
			}
			table a:hover{
				color:#ffff80;
			}
	</style>

   <script type="text/javascript">
    function addFile(){
	var oTabNode = document.getElementById("tab1");
				var oTrNode = oTabNode.insertRow();
				var oTdNode1 = oTrNode.insertCell();
				oTdNode1.innerHTML="<input type='file' name='pics'/>";
				
				var oTdNode2 = oTrNode.insertCell();
	
	            //oTdNode2.innerHTML="<a href='javascript:delFile(this)'>删除附件</a>" //bug: 这种方式delFile(this)中的实参this是无效的
				oTdNode2.innerHTML="<a href='javascript:void(0)' onclick='delFile(this)'>删除附件</a>"
	}
	
	function delFile(aNode){
				//alert("11:"+aNode.nodeName);
				var oTrNode = aNode.parentNode.parentNode;
				//alert(oTrNode.nodeName);
				oTrNode.parentNode.removeChild(oTrNode);
			}
			
   </script>

  </head>
  
  <body>
    <h3>DOM--动态表单(以添加附件为例)技术的演示</h3>
		<table id="tab1">
			<tr>
				<td><a href="javascript:addFile()">添加附件</a></td>
			</tr>
			<!--由addFile()动态创建下面<tr>中的内容
			<tr>
				<td><input type="file" name="pics"/></td>
				<td><a href="javascript:delFile(this)">删除附件</a></td>
			</tr>
			-->
			
		</table>		
  </body>
</html>

木木木是我

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js基础运用 day 11

DOM——有关组合框组件——下拉菜单select用法演示&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type&quo
复制链接

扫一扫