zoukankan      html  css  js  c++  java
  • 实例——省市区三级联动 & 还可以输入字符统计

    1 省市区三级联动

    html代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>三级联动3</title>
    <script src="js/area3.js"></script>
    </head>
    
    <body>
    	省:<select id="province">
    	   		
    	   </select>	
    	市:<select id="city">
    			<option>请选择</option>
    	   </select>
    	区:<select id="areas">
    			<option>请选择</option>
    	  </select>
    </body>
    
    </html>
    

    js代码:

    var data = [
    	[1,"山东省",0],
    	[2,"江苏省",0],
    	[11,"济南市",1],
    	[12,"青岛市",1],
    	[13,"淄博市",1],
    	[21,"南京市",2],
    	[22,"宿迁市",2],
    	[131,"张店区",13],
    	[132,"淄川区",13],
    	[133,"博山区",13],
    	[111,"历城区",11],
    	[112,"历下区",11]	
    ];
    
    window.onload=function(){
    	var province=document.getElementById('province'); //省的select	
    	var city=document.getElementById('city'); //市的select	
    	var areas=document.getElementById('areas'); //区的select	
    	
    	add_data(province,0); //添加省
    	
    	province.onchange=function(){ //省改变时,传入市,传入省的value
    		add_data(city,this.value)
    	};
    	
    	city.onchange=function(){ //市改变时,传入区,传入市的value
    		add_data(areas,this.value)
    	};
    	
    }
    
    function add_data(obj,vid){ //传入两个参数:对象,值		
    	areas.innerHTML='<option value="-1">请选择</option>';	 //点击省时,把区的数据清掉
    	var str='<option value="-1">请选择</option>';
    	for(var i=0; i<data.length; i++){
    		if(data[i][2] == vid){
    			str+='<option value="'+data[i][0]+'">'+data[i][1]+'</option>';
    		}		
    	}
    	obj.innerHTML=str;
    }
    

    2 还可以输入的字符数统计

    代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>还可以输入</title>
    </head>
    <body>
    <p>还可以再输入<span id="num">10</span>个字符</p>
    <textarea id="my_input" rows="10" maxlength="10"></textarea>
    	
    <script>
    var num=document.getElementById('num');
    var inbox=document.getElementById('my_input');
    
    inbox.onkeyup=function(){
    	num.innerHTML=10-this.value.length;
    }
    </script>
    
    </body>
    </html>
    

    收获:

    1 数据处理的能力特别重要

    2 能让客户选择的,就不要让客户填写

    3 给select添加内容时,虽然他是表单元素,但是可以使用innerHTML,

     可以这样记忆:双标签用innerHTML,单标签用value

    4 select的值改变,使用onchange事件

    5 option没有设value时,取其内容值

    6 当一些代码相同时(出现拷贝代码的情况),就需要优化了。可以定义一个函数,然后通过传不同的参数,实现相应功能。

  • 相关阅读:
    【Hadoop学习之十三】MapReduce案例分析五-ItemCF
    【Hadoop学习之十二】MapReduce案例分析四-TF-IDF
    【Hadoop学习之十】MapReduce案例分析二-好友推荐
    【Hadoop学习之九】MapReduce案例分析一-天气
    【Hadoop学习之十一】MapReduce案例分析三-PageRank
    RPC(Remote Procedure Calls)远程过程调用
    基于java开源区块链Blockchain相关项目介绍
    按 file 分组统计视图 | 全方位认识 sys 系统库
    内存分配统计视图 | 全方位认识 sys 系统库
    按 host 分组统计视图 | 全方位认识 sys 系统库
  • 原文地址:https://www.cnblogs.com/hzhjxx/p/9719571.html
Copyright © 2011-2022 走看看