JS中onchange事件:域内容被改变的事件

大炮最近复习js的事件

复习onchange事件的时候做了一个，城市和区的二级联动的菜单，和大家分享一下

onchange:域内容被改变的事件需求：实现二级联动

<body>This is my HTML page.<br><!-- 定义出城市和区 --><select id="city"><option value="bj">北京</option><option value="tj">天津</option><option value="sh">上海</option><option value="wh">武汉</option><option value="hz">杭州</option></select><select id="area"><option>海淀区</option><option>朝阳区</option><option>西城区</option><option>北城区</option></select>
</body>
<script type="text/javascript">//用document.getElementById("city")方法获得idvar select1 = document.getElementById("city");//用onchange的局部方法来实现区域联动select1.onchange = function() {var op = select1.value;switch (op) {case "bj"://通过id，获得了area对象var area = document.getElementById("area");//对area用innerHTML方法来实现了以字符串类型来替换了 html代码area.innerHTML = "<option>海淀区</option><option>朝阳区</option><option>西城区</option><option>北城区</option>";break;case "tj":var area = document.getElementById("area");area.innerHTML = "<option>经济区</option><option>科技区</option><option>天天区</option><option>北城区</option>";break;case "sh":var area = document.getElementById("area");area.innerHTML = "<option>浦东区</option><option>浦西区</option><option>黄浦区</option><option>浦江区</option>";break;case "wh":var area = document.getElementById("area");area.innerHTML = "<option>武昌区</option><option>汉阳区</option><option>江岸区</option><option>江夏区</option><option>蔡甸区</option>";break;case "hz":var area = document.getElementById("area");area.innerHTML = "<option>义乌区</option><option>西湖区</option><option>江柳区</option><option>江夏区</option><option>蔡甸区</option>";break;}}
</script>

就这样就可以通过js中的onchange事件，实现区域联动的效果了主要是通过onchange域内容被改变的事件，

和调用了用innerHTML方法来实现了以字符串类型来替换了 html代码

JS中onchange事件:域内容被改变的事件相关推荐

JS中的跨域问题及解决办法汇总
一.什么是跨域? 在了解跨域之前,首先要知道什么是同源策略(same-origin policy).简单来讲同源策略就是浏览器为了保证用户信息的安全,防止恶意的网站窃取数据,禁止不同域之间的JS进行交 ...
[事件处理] js实现的文本框内容发生改变立马触发事件简单介绍
js实现的文本框内容发生改变立马触发事件简单介绍: 本章节介绍一下如何在文本框的内容发生变化的时候,立马触发一个事件执行响应的操作,而不是像是keydow或者keyup事件一样,只能够检测通过键盘输入 ...
php js记住密码功能,JS中解决谷歌浏览器记住密码输入框颜色改变功能
谷歌浏览器记住密码输入框颜色会改变,并且字体颜色会变成黑色,如图输入框原来的样式是这样的然而记住密码后,输入框颜色就变成了黄色,并且字体变成了黑色这是由于谷歌浏览器的自带样式的缘故: input ...
js中冒泡和捕获/阻止冒泡和捕获事件
JavaScript中捕获/阻止捕获.冒泡/阻止冒泡事件流描述的是从页面中接收事件的顺序.提出事件流概念的正是IE和Netscape,但是前者提出的是我们常用的事件冒泡流,而后者提出的是事件捕获流. ...
js中onchange事件举例用法
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>举例示 ...
js中各种跨域问题实战小结
什么是跨域?为什么要实现跨域呢? 这是因为JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.也就是说只能访问同一个域中的资源.我觉得这就有必要了解下javascript中的同源策略 ...
js中怎么为同级元素添加点击事件
事件件是javascript脚本语言的重要组成部分,因为有事件才使用户页面的体验更加的美好.元素添加事件是js语言中最基础的.我们可以为元素本身添加事件,也可以通过事件绑定和事件监听为元素的父元素和子 ...
关于解决vue.js中组件的template内容不能换行的问题
template的内容引用不能用单引号'':要用` `(着重符,感叹号左边的键). template: `<transition name="fade"><slo ...
java中获取文本域内容_怎样读文件内容到文本域中（java SWT）
//写了段简单的代码提供你参考importjava.io.BufferedReader;importjava.io.File;importjava.io.FileInputStream;importj ...

JS中onchange事件:域内容被改变的事件

JS中onchange事件:域内容被改变的事件相关推荐

最新文章

热门文章