select的onchange事件问题

2024-05-24 05:48
文章标签 问题 事件 select onchange

本文主要是介绍select的onchange事件问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

转自:http://blog.sina.com.cn/s/blog_5f7b8c2c0100l7yf.html


一、onChange事件只有在值改变时才可触发,所以必须在每一次选择时(尤其第一次)保证选择的值是改变的!

所以<select name="inv_payee" id="ECS_INVPAYEE" οnchange="show_payee();" style="border:1px solid #ccc;">
    <option value="个人" selected >个人</option>  //在这要选定一个默认的值 "selected"

    <option value="单位">单位</option>
    </select>

这样在选择第二个时,值就会变即可触发onChange;

二、我们用Select的onchange事件时,常会遇到这样一个问题,那就是连续选相同一项时,不触发onchange事件.select的onchange事件就是这样子的.你得有Change(改变),才能触发该事件....
<select name=sel οnchange="bao(this.options[this.options.selectedIndex].value)">
<option value="">请选择
<option value="1">Item 1
<option value="2">Item 2
<option value="3">Item 3
</select>
<script>
function bao(s)
{
txt.value =s;
//选择后,让第一项被选中,这样,就有Change啦.
document.all.sel.options[0].selected=true;
}
</script>
<textarea id=txt></textarea>
三、

js中onchange事件是在客户端改变输入控件的值,比如一个textbox,会出发的一个事件。但是如果在js代码中改变一个textbox的value,而不是通过键盘输入改变一个textbox值的话,是不会出发onchange事件的。

那么,如何在js代码模式通过代码触发textbox控件的onchange事件呢,经过查阅资料,发现js提供了一个方法,可以触发控件的应该是所有事件。object.fireEvent()方法,使用方法如 object.fireEvent('onchange'),即可触发控件的onchange事件。

同理,js中使用fireEvent方法还可以触发其他的空间事件。

触发onchange事件的问题,并不是值一旦更改就会触发onchange事件。
对于onBlur和onFocus可以直接调用object.Blur()和object.Focus(),但javascript中没有object.Change
事件。

1.ie 处理1

 document.getElementByIdx_x('hid_provider_id').attachEvent("onpropertychange",function(){alert('gggg');});

2.object.fireEvent()可以触发事件,如触发onchange事件则是object.fireEvent('onchange'),以此类推。

例:
  <SELECT   id=select1     onchange="alert(this.value)">  
  <OPTION   value="0">0</OPTION>  
  <OPTION   value="1">1</OPTION>  
  <OPTION   value="2">2</OPTION>  
  </SELECT>  
   
  <INPUT   type="text"   id=text1   name=text1>  
  <INPUT   type="button"   value="Button"   onclick="select1.selectedIndex=text1.value"> 
  手动改变select的值,会触发onchange  
  脚本改变selectedIndex,不会触发onchange
解决办法
if   (select1.fireEvent)  
      select1.fireEvent("onchange")  
  else  
      select1.onchange()

<INPUT   type="button"   value="Button"   onclick="select1.selectedIndex=text1.value;
select1.fireEvent('onchange')">
程序,里因为程序里有多个action里并每个action有多个submit按钮事件,为了区别代码,同时页面隐藏
按钮
<select name="select" onchange="document.getElementByIdx_x('seaoldsubmit').click();">
<option value="0">查询条件</option>
......
</select>
<input type="submit" name="seaoldsubmit" value="确定" style="display:none">
if(submitcheck('seaoldsubmit'))

四、最近项目中遇到一个问题,要用js去触发onchange事件。
上网找了一些资料,IE上有onpropertychang事件,可以用js去触发这个事件,但是Firefox不支持这个事件,
然后在firefox中去绑定一个input事件。但是这是无效的啊,仍然不会去触发onchange事件。
最后只能用未解决方案了!

用js修改值的时候,在js执行修改完之后去执行onchange事件,不过这样即使这个值不改变的话也会调用这个方法。

function handle()
{document.getElementByIdx_x('msg').innerHTML='输入的文字长度为:'+document.getElementByIdx_x('txt').value.length;
}
//firefox下检测状态改变只能用oninput,且需要用addEventListener来注册事件。
if(/msie/i.test(navigator.userAgent))    //ie浏览器
{document.getElementByIdx_x('txt').onpropertychange=handle
}
else
{//非ie浏览器,比如Firefox
document.getElementByIdx_x('txt').addEventListener("input",handle,false);
}
</script>
</head>

<body id="mybody" class="index">
<div id="msg"></div>
<input id='txt' value="" />

以上为测试代码。


这篇关于select的onchange事件问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/997550

相关文章

解决pandas无法读取csv文件数据的问题

《解决pandas无法读取csv文件数据的问题》本文讲述作者用Pandas读取CSV文件时因参数设置不当导致数据错位,通过调整delimiter和on_bad_lines参数最终解决问题,并强调正确参... 目录一、前言二、问题复现1. 问题2. 通过 on_bad_lines=‘warn’ 跳过异常数据3

解决RocketMQ的幂等性问题

《解决RocketMQ的幂等性问题》重复消费因调用链路长、消息发送超时或消费者故障导致,通过生产者消息查询、Redis缓存及消费者唯一主键可以确保幂等性,避免重复处理,本文主要介绍了解决RocketM... 目录造成重复消费的原因解决方法生产者端消费者端代码实现造成重复消费的原因当系统的调用链路比较长的时

深度解析Nginx日志分析与499状态码问题解决

《深度解析Nginx日志分析与499状态码问题解决》在Web服务器运维和性能优化过程中,Nginx日志是排查问题的重要依据,本文将围绕Nginx日志分析、499状态码的成因、排查方法及解决方案展开讨论... 目录前言1. Nginx日志基础1.1 Nginx日志存放位置1.2 Nginx日志格式2. 499

kkFileView启动报错:报错2003端口占用的问题及解决

《kkFileView启动报错:报错2003端口占用的问题及解决》kkFileView启动报错因office组件2003端口未关闭,解决:查杀占用端口的进程,终止Java进程,使用shutdown.s... 目录原因解决总结kkFileViewjavascript启动报错启动office组件失败,请检查of

SpringBoot 异常处理/自定义格式校验的问题实例详解

《SpringBoot异常处理/自定义格式校验的问题实例详解》文章探讨SpringBoot中自定义注解校验问题,区分参数级与类级约束触发的异常类型,建议通过@RestControllerAdvice... 目录1. 问题简要描述2. 异常触发1) 参数级别约束2) 类级别约束3. 异常处理1) 字段级别约束

Python错误AttributeError: 'NoneType' object has no attribute问题的彻底解决方法

《Python错误AttributeError:NoneTypeobjecthasnoattribute问题的彻底解决方法》在Python项目开发和调试过程中,经常会碰到这样一个异常信息... 目录问题背景与概述错误解读:AttributeError: 'NoneType' object has no at

Spring的RedisTemplate的json反序列泛型丢失问题解决

《Spring的RedisTemplate的json反序列泛型丢失问题解决》本文主要介绍了SpringRedisTemplate中使用JSON序列化时泛型信息丢失的问题及其提出三种解决方案,可以根据性... 目录背景解决方案方案一方案二方案三总结背景在使用RedisTemplate操作redis时我们针对

Kotlin Map映射转换问题小结

《KotlinMap映射转换问题小结》文章介绍了Kotlin集合转换的多种方法,包括map(一对一转换)、mapIndexed(带索引)、mapNotNull(过滤null)、mapKeys/map... 目录Kotlin 集合转换:map、mapIndexed、mapNotNull、mapKeys、map

nginx中端口无权限的问题解决

《nginx中端口无权限的问题解决》当Nginx日志报错bind()to80failed(13:Permissiondenied)时,这通常是由于权限不足导致Nginx无法绑定到80端口,下面就来... 目录一、问题原因分析二、解决方案1. 以 root 权限运行 Nginx(不推荐)2. 为 Nginx

解决1093 - You can‘t specify target table报错问题及原因分析

《解决1093-Youcan‘tspecifytargettable报错问题及原因分析》MySQL1093错误因UPDATE/DELETE语句的FROM子句直接引用目标表或嵌套子查询导致,... 目录报js错原因分析具体原因解决办法方法一:使用临时表方法二:使用JOIN方法三:使用EXISTS示例总结报错原