JavaScript实现省市县 * 级联特效
作者:Cheny0815 发布时间:2024-04-18 10:55:56
标签:js, , 级联
本文实例为大家分享了js省市县 * 级联特效的实现代码,供大家参考,具体内容如下
主要思想
1.省改变,市改变,并初始化县
2.市改变,县改变
html代码
<select id="sheng">
<option value="">--请选择--</option>
<option value="0">北京市</option>
<option value="1">河北省</option>
<option value="2">山西省</option>
<option value="3">内蒙古自治区</option>
</select>
<select id="shi">
<option value="">--请选择--</option>
</select>
<select id="xian">
<option value="">--请选择--</option>
</select>
主要步骤
1.获取元素对象
var sheng = document.getElementById('sheng');
var shi = document.getElementById('shi');
var xian = document.getElementById('xian');
2.定义市和县的数组
var city = [
['昌平区', '海淀区', '朝阳区', '东城区'],
['石家庄市', '保定市', '张家口市', '唐山市'],
['太原市', '大同市', '运城市', '临汾市'],
['呼和浩特市', '包头市', '鄂尔多斯市', '赤峰市']
];
var xians = [
[
['北七家','回龙观','霍营'],
['中关村','苏州街','西二旗'],
['朝阳1','朝阳2','朝阳3'],
['东城1','东城2','东城3'],
],
[
['新华区','桥东区','桥西区'],
['高碑店','白沟','定兴'],
]
];
3.定义全局变量
var index = null;
4.实现省份改变,市跟着变化的效果
sheng.onchange = function() {
xian.innerHTML = '<option value="">--请选择--</option>';// 初始化xian
index = this.value; // 获取option的值
var result = city[index];//根据index去city数组中获取对应的shi
// 将获取的结果显示在select#shi中,循环result数组中的"每一个值",在值的两侧加上option标签
var str = '<option value="">--请选择--</option>';
for (var i = 0; i < result.length; i++) {
// 将所有的拼接好的市再次拼接为一个整体
str += '<option value="'+i+'">' + result[i] + '</option>';
}
shi.innerHTML = str;//将字符串写入到select#shi中
}
5.实现市改变,获取县城的效果
shi.onchange = function(){
var value = this.value; // 获取当前的value值
var county = xians[index][value]; // 根据市获取市对应的县
var str = '<option value="">--请选择--</option>';
for (var i = 0; i < county.length; i++) {
str += '<option value="'+i+'">' + county[i] + '</option>';
}
xian.innerHTML = str;//将数据写入到select#xian中
}
0
投稿
猜你喜欢
- 我们平时需要使用 Python 发送各类邮件,这个需求怎么来实现?答案其实很简单,smtplib 和 email 库可以帮忙实现这个需求。s
- 预测结果转为numpy:logits=model(feature)#如果模型是跑在GPU上result=logits.data.cpu().
- 本文实例讲述了PHP函数extension_loaded()用法。分享给大家供大家参考。具体分析如下:extension_loaded —
- 如下所示:import matplotlib.pyplot as pltimport numpy as npimport mathdef g
- Python深搜版:核心在于带随机的深搜(见代码第23到27行,其实也可以用22行代替这几行代码,你可以试着把第24行的数字4改大或者改小,
- 1. 介绍前面我们尝试通过python实现了代码雨以及字母随机闪烁的效果,这次,我们再来实现一个代码的线性扫面。同样的,此次我们仍然是使用3
- python中对文件、文件夹(文件操作函数)的操作需要涉及到os模块和shutil模块。得到当前工作目录,即当前Python脚本工作的目录路
- 说明本文根据https://github.com/liuchengxu/blockchain-tutorial的内容,用python实现的,
- select语句中只能使用sql函数对字段进行操作(链接sql server),select 字段1 from 表1 where 字段1.I
- 程序开发一定要有开发工具,网上找了很多关于Python的开发工具,大神们在用记事本和VIM,小白都用PyCharm,我是属于小白一类的当然也
- 今天开发富媒体广告遇到的问题 用JS控制flash 只在IE平台下有效 费尽周折才找到兼容的解决方案方法如下:重点在于 object的id属
- 1.在myblog中的urls.py中from django.urls import includefrom django.conf.url
- 本文实例为大家分享了JSP学生信息管理系统源码,供大家参考,具体内容如下新建学生信息数据库1.添加记录模块<%@ page conte
- 环境内容:Pyhon版本:3.7.1scikit_learn==0.20.0graphviz==0.8.4numpy==1.15.3pand
- 对于中小型个人、企业网站来说,MySQL数据库或许是目前数据库的最完美实施解决方案了。在不变更服务器硬件的前提下,一个经过良好架构,优化后的
- 以下各种方式仅供参考,本人亲测只有官方提供的方式比较靠谱。1. 使用多个进程启动多个Tornado实例import tornado.http
- 起步要介绍一个非常方便的 Django 扩展包-- django-hosts 。它能够提供在不同的子域名下访问不同的 app。例如,在项目中
- 我就废话不多说了,大家还是直接看代码吧~#!/usr/bin/env python# -*- coding: utf-8 -*-import
- python发邮件需要掌握两个模块的用法,smtplib和email,这俩模块是python自带的,只需import即可使用。smtplib
- 现在能用自动化实现的,尽量使用自动化程序去操作,代替人工去操作,更有效率。今天说下用python结合adb命令去实现安卓手机端的通话压力测试