当前位置: 代码迷 >> JavaScript >> 高手帮帮忙忙吧!高分奉送!select onchange 重复选择同一项,常会遇到这样一个有关问题,那就是连续选相同一项时,不触发onchange事件
  详细解决方案

高手帮帮忙忙吧!高分奉送!select onchange 重复选择同一项,常会遇到这样一个有关问题,那就是连续选相同一项时,不触发onchange事件

热度:936   发布时间:2012-02-27 10:00:22.0
高手帮帮忙忙吧!高分奉送!select onchange 重复选择同一项,常会遇到这样一个问题,那就是连续选相同一项时,不触发onchange事件
如何实现重复选择同一项,可以连续触发事件,选择完之后,必须还是显示当前选择的项。例如 “//选择后,让第一项被选中,这样,就有Change啦. 
document.all.sel.options[0].selected=true; “这样不可,只要实现重复选择同一项,可连续触发事件就可,在线等等,着急!


------解决方案--------------------
不知道你的意思!
------解决方案--------------------
什么叫onchange???
就是选择不同的项了才触发这个事件.
------解决方案--------------------
选择同一项OPTION是不会触发ONCHANGE事件的;你可以在OPTION中增加一项"--请选择--",看是否达到你目的;
你想通过这个事件的触发,实现什么功能?
------解决方案--------------------
改成在onclick触发不就OK了。
------解决方案--------------------
onblur="javascript:alert(this.options[this.selectedIndex].value);"
------解决方案--------------------
要不就用div模拟吧
------解决方案--------------------
想了个笨方法:
先得到下拉项点开的事件,此时是焦点和鼠标点击(键盘下拉箭头?)等事件
然后再判断鼠标点击一次,或者回车之类的,此时是选中了,最后读选中的值,做操作。

中间有些可能不对,但流程是这样的
------解决方案--------------------
http://blog.csdn.net/snakegod/archive/2004/11/03/165501.aspx


HTML code
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV模拟select </title>
<style>
.selectDiv { border: 2px solid inset buttonface;}
.optionDiv { border:1px solid black;border-top:0px;position:absolute;visibility:hidden;}
.optionDiv div { font-size:11px;font-family:Tahoma;padding-left:8px;line-height:130%;cursor:default;width:100%;}
.defaultSelect { font-size:11px;font-family:Tahoma;text-align:center;border:1px solid white;cursor:default;width:77px;}
.defaultSelect2 { font-size:11px;font-family:Tahoma;text-align:center;border:1px solid white;cursor:default;}
.arrow { font-family:webdings;line-height:13px;border:2px outset buttonhighlight;background-color:#cccccc;width:15px;text-align:center;cursor:default;font-size:8px;}
</style>
<script language="javascript">
/*
文件说明
由于select 不会被挡住 在做菜单的时候会影响效果 本程序通过div模拟select 定义的时候参考下例

定义时的有用属性列表
style.width 宽度 如果定义了宽度 转化后的select将采用这个宽度 不定义宽度90
height  高度 如果不定义select将根据options的数量自动增长
options  select内容 转化后将变成数组 可以通过 <obj>.options[ <下标一>][ <下标二>]访问,如 <obj>.options[3][2] 
onChange 或者 onchange 选择后执行这段代码 如果没有就不执行
转化后新增属性
value 选择后的value
text 选择后显示出来的内容
selectedIndex 第几项被选中了 从0开始 默认为0

其它
转化请调用函数ChangeToSelect 例如 ChangeToSelect(CUL);
在样式表里清定义如下样式
.selectDiv { border: 2px solid inset buttonface;}
.optionDiv { border:1px solid black;border-top:0px;position:absolute;visibility:hidden;}
.optionDiv div { font-size:11px;font-family:Tahoma;padding-left:8px;line-height:130%;cursor:default;width:100%;}
.defaultSelect { font-size:11px;font-family:Tahoma;text-align:center;border:1px solid white;cursor:default;width:77px;}
.defaultSelect2 { font-size:11px;font-family:Tahoma;text-align:center;border:1px solid white;cursor:default;}
.arrow { font-family:webdings;line-height:13px;border:2px outset buttonhighlight;background-color:#cccccc;width:15px;text-align:center;cursor:default;font-size:8px;}

开发者 李世尧 对 蓝色理性 http://www.blueidea.com/tech/web/2003/1327.asp 内容进行修改得到该文件
  相关解决方案