select标签的onchange事件
/*
* @1.onchange事件 ==> select选择事件
* @2.obj.options ==> 选择option集合
* @3.obj.selectedIndex ==> 选择的下标
*/
/*
* @bug
* @1.onchange事件只有在值改变时才可触发,所以必须在每一次选择时(尤其第一次)保证选择的值是改变的!
* @2.连续选相同一项时, 不触发onchange事件
* @3.创建option必须使用 new Option()
* @ add()方法附加到select中第二个参数要设置为undefined兼容
*/
// select单个选择
chooseProvince();
function chooseProvince(){
var obj = document.getElementById("province");
var sele = obj.options;
obj.onchange = function(){
var index = obj.selectedIndex;
if(index > 0){
console.log(sele[index].value);
}
}
}
// 城市选择
var datas = [["--选择城市--"],
["北京1", "北京2", "北京3"],
["天津1", "天津2", "天津3"],
["上海1", "上海2", "上海3"]
];
chooseProvince()
function chooseProvince(){
var province = document.getElementById("province");
var citySel = document.getElementById("city");
province.onchange = function(){
var index = province.options.selectedIndex;
citySel.innerHTML = '';
if(index > 0){
citySel.style.display = "block";
citySel.options.add(new Option(datas[0][0], undefined));
var citys = datas[index];
for(var i = 0; i < citys.length; i++){
citySel.options.add(new Option(citys[i], undefined));
}
}else{
citySel.style.display = "none";
}
} citySel.onchange = function(){
if(citySel.selectedIndex > 0){
console.log("你选择了:" + citySel.options[citySel.selectedIndex].value);
}
}
}
<div id="select_box">
<select id="province">
<option selected="selected">--选择省市--</option>
<option value="北京">北京</option>
<option value="天津">天津</option>
<option value="上海">上海</option>
</select>
<select id="city"></select>
</div>
select标签的onchange事件的更多相关文章
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
<script src="jquery.min.js" type="text/javascript"></script> <scr ...
- IE下Checkbox标签的onchange事件兼容
Checkbox onchange事件在谷歌上ok,在ie8上不起作用了. 一番周折,测试发现勾选了以后还要点击其他位置才会触发onchange事件. 用度娘查询了一下. 有下面两种解决方式: 用on ...
- 关于两栏布局,三栏布局,一级点击三角触发select的onchange事件问题
首先看这样一个效果:,这个截图来自移动端的列表的一整行,在这个效果当中,存在两个技术点,首先选择祝福卡这个宽度是一定的,右边的部分,宽度随着手机屏幕的宽度而自适应,再一个技术点就是点击最右侧向下箭头, ...
- HTML Select 标签选择后触发jQuery事件代码实例
页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...
- js 触发select onchange事件
select 或text的onchange事件需要手动(通过键盘输入)改变select或text的值才能触发,本文为大家介绍下使用js触发select onchange事件select 或text的o ...
- select的onChange事件问题解决
一.onChange事件只有在值改变时才可触发,所以必须在每一次选择时(尤其第一次)保证选择的值是改变的! 所以<select name="inv_payee" id=&qu ...
- select的onchange事件获取不了option的value
一,select的onchange事件获取不了option的value是当你使用JQ($("#xxx").val())方法的获取的值一直提示undefined 二,解决方法: va ...
- 2017年3月25日工作日志:Jquery使用小结[绑定事件判断、select标签、军官证正则]
jQuery获取DOM绑定事件 在1.8.0版本之前,我们要想获取某个DOM绑定的事件处理程序可以这样: $.data(domObj,'events');//或者$('selector').data( ...
- jQ给下拉框绑定事件,为什么要绑定在框(select标签)上,而不是绑定在选项(option标签)上
这是我在学习锋利的 jquery 书中 5.1.4 的代码时遇到的一个小问题,源代码如下: <head> <style type="text/css"> * ...
随机推荐
- [转]Hash碰撞冲突解决方法总结
我们知道,对象Hash的前提是实现equals()和hashCode()两个方法,那么HashCode()的作用就是保证对象返回唯一hash值,但当两个对象计算值一样时,这就发生了碰撞冲突.如下将介绍 ...
- import_tasks: tasks/sometasks.yml
- import_tasks: tasks/sometasks.yml when: "'reticulating splines' in output" unarchive模块用 ...
- OC基础--常用类的初步介绍与简单使用之NSDate
一.创建一个时间 NSDate *date = [NSDate date]; // 打印出的时间是0时区的时间(北京--东八区) NSLog(@"%@",date); 二.日期格式 ...
- golang 数组以及slice切片
老虞学GoLang笔记-数组和切片 数组 Arrays 数组是内置(build-in)类型,是一组同类型数据的集合,它是值类型,通过从0开始的下标索引访问元素值.在初始化后长度是固定的,无法修改其 ...
- java list分组 list里面分装的都是对象 按照对象的属性来分组
http://www.iteye.com/problems/86110 —————————————————————————————————————————————————————————— List& ...
- 上手并过渡到PHP7(5)——轻量级“集合”迭代器-Generator
轻量级“集合”迭代器-Generator泊学视频链接泊阅文档链接Generator是PHP 5.5加入的新语言特性.但是,它似乎并没有被很多PHP开发者广泛采用.因此,在我们了解PHP 7对Gener ...
- 【转】nginx中proxy_set_header Host $host的作用
nginx为了实现反向代理的需求而增加了一个ngx_http_proxy_module模块.其中proxy_set_header指令就是该模块需要读取的配置文件.在这里,所有设置的值的含义和http请 ...
- D方法 自动完成
控制器 public function insert(){ $Wztj = D("Wztj");if($vo=$Wztj->create()){ if($Wztj->a ...
- am335x hid-multitouch.c
am335x在使用电容屏,需要加载hid-multitouch.ko模块 由下面文件生成 kernel/drivers/hid/hid-multitouch.c 内核中编译模块 make module ...
- Servlet程序的入口点是?( )
Servlet程序的入口点是?( ) A.init() B.main() C.service() D.doGet() 解答:C