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 当一些代码相同时（出现拷贝代码的情况），就需要优化了。可以定义一个函数，然后通过传不同的参数，实现相应功能。

实例——省市区三级联动 & 还可以输入字符统计的更多相关文章

  1. 用jsp实现省市区三级联动下拉

    jsp+jquery实现省市区三级联动下拉 不少系统都需要实现省市区三级联动下拉,像人口信息管理.电子商务网站.会员管理等,都需要填写地址相关信息.而用ajax实现的无刷新省市区三级联动下拉则可以改善 ...

  2. 省市区三级联动 pickerView

    效果图 概述 关于 省市区 三级联动的 pickerView,我想大多数的 iOS 开发者应该都遇到过这样的需求.在遇到这样的需求的时候,大多数人都会觉的这个很复杂,一时无从下手.其实真的没那么复杂. ...

  3. JS省市区三级联动

    不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...

  4. ajax省市区三级联动

    jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...

  5. PHPOffice/PHPExcel生成省市区三级联动的excel表格

    最近公司需要用到一个省市区三级联动的excel表格,但是数据都在数据库,又太多,人工不好制作,就让我这个phper来帮忙啦. 主要用到的是excel的定义名称,数据验证.其中数据验证的列表只能是一列或 ...

  6. vue省市区三级联动

    仿照小米之家做的一个省市区三级联动,先上代码: HTML: <template> <section class="myAddress"> <secti ...

  7. 省市区三级联动——思路、demo、示例

    说明(2017-12-13 11:03:58): 1. 这个功能应该是注册的时候非常.常用的了,不过现在都是微信登录,手机端自动获取位置什么的,可能就网站还用用吧! 2. 这个东西的难点在于统计各地省 ...

  8. JS实现年月日三级联动+省市区三级联动+国家省市三级联动

    开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...

  9. 【JavaScript&jQuery】省市区三级联动

    HTML: <%@page import="com.mysql.jdbc.Connection"%> <%@ page language="java&q ...

随机推荐

  1. 【转】unittest执行测试用例的N种姿势总结

    原文地址:https://www.cnblogs.com/fighter007/p/9514453.html 1.我们写几个方法,用来做测试用例 2.我们在另一文件中引用这个模块下面的所有类方法,先看 ...

  2. 安装pillow

    最近想学Python的图像操作.首要任务就是安装pillow.这个强大的图形处理工具. 但是我遇到了一个问题. Collecting pilow  Could not find a version t ...

  3. jQuery名字冲突 noConflict()方法

    今天检查项目的时候发现一个jquery变量$的控制权让渡问题,原因是: 开发这个模块的同事使用了一个日历插件,把$的控制权让出了,就导致了加载完这个页面后再加载其他页面就会报出$不是一个函数的错误. ...

  4. Elasticsearch中提升大文件检索性能的一些总结

       笔者在实际生产环境中经常遇到一些大文件的检索,例如一些书籍内容,PDF文件等.今天这篇博客主要来探讨下如何提升ES在检索大文件的一些性能,经验有限,算是一个小小的总结吧! 1.大文件是多大? E ...

  5. dpdk数据包捕获技术笔记1

    1 高效捕包技术的重要性 高性能系统需要在很短的时间内,成功的收集和处理大量的数据,目标系统的实时数据需要被收集,管里和控制. 2 传统的数据包捕获机制 Inter指出,影响数据包捕获性能主要原因是系 ...

  6. 3. docker容器内信息获取、命令的执行、容器的导入和导出

    一.依附容器 依附操作attach通常用在由docker start或者docker restart启动的交互型容器中.由于docker start启动的交互型容器并没有具体终端可以依附,而容器本身是 ...

  7. Hyperledger Fabric 替换couchDB

    fabric中默认数据存储的方式是levelDB,一个key/value存储的单机数据库.除此之外还提供了另外一种存储方式:couchDB.同样也是一个K/V 数据库,对fabric而言,相比于前者, ...

  8. Linux服务器上的禅道迁移及升级方法（Linux to Linux）

    由于阿里云服务器(Linux系统)到期停用,故需要将部署在该服务器上的禅道迁移到新的Linux服务器上.另外,借此机会,正好可以对旧版禅道进行一次升级.下面总结此次迁移和升级的具体操作方法. 一.禅道 ...

  9. IDEA 小技巧之书签与收藏

    原文地址:IDEA 小技巧之书签与收藏 最近翻阅 Spring 源码,由于源码调用链路很长,等看了十几类方法之后,想看前面调用方法就很不方便,需要查找历史的查看记录.还有时候看着看着就忘了中间某个方法 ...

  10. JSF 与 struts2

    http://suhuanzheng7784877.iteye.com/blog/1041411