Chinaunix

标题: [AJAX] AJAX中的javascript对下拉菜单的onChange事件的处理 [打印本页]
作者: imbiss    时间: 2006-01-05 07:56
标题: [AJAX] AJAX中的javascript对下拉菜单的onChange事件的处理
我在我的blog上用了一段aja*(返回数据没有使用xml)代码,来实现不刷新整个页面的option下拉菜单的更新。
具体参见
http://www.stud.uni-karlsruhe.de/~uu5i/blog/
页面的右下角achives
目前运行良好，如果仔细观察,发现存在一个bug.
即如果修改了年份选项,相邻的月份选项也将发生变化,点击就进入相应的页面.
但是,如果你选第一个选项,也就是刷新后默认选项就,就没有动作.

我估计bug的原因是我用了onChange事件来触发。ajax以后，整个选项都发生变化，按理点击任何一个选项都可以触发onchange事件。但实际上，默认的第一个选项不能触发该事件。

请问各位有何高见？

[ 本帖最后由 HonestQiao 于 2006-1-5 09:19 编辑 ]
作者: dulao5    时间: 2006-01-05 09:06
加一个“请选择”的选项
作者: HonestQiao    时间: 2006-01-05 09:19
http://cws.yi.org/ajax

请参考。
作者: imbiss    时间: 2006-01-05 21:43
你的例子我看到了，很好。但是需要安装xajax和学习使用它。我就这么一个小bug，这样做大动干戈了。
而且，多加一个"请选择"，避开这个问题，也不是我希望的。
作者: 老茂    时间: 2006-01-06 10:21
onchange 事件  .必须是value改变才会触发的 。
这个不能算bug，原本的处理机制就是这样的
作者: imbiss    时间: 2006-01-06 18:05
我不是说是js的bug，而是我的bug。添加·请选择·是很容易避开这个问题，但是仍然不是最佳的解决方案。
在用ajax更新了下拉菜单以后，所有option的value都已经发生变化。所以因该不是这个问题。
作者: crazysoul    时间: 2006-01-07 01:35
主动触发即可以，即直接调用onchange()方法
作者: cooljia    时间: 2006-01-07 15:36
不错的例子, 没见过楼主在java版出现过.
作者: imbiss    时间: 2006-01-07 18:09
To crazysoul: 何谓主动触发，请大侠明示
To cooljia :我不用java，所以没去过java板块。
作者: HonestQiao    时间: 2006-01-08 17:01
  1. <select name="test" size="1" onchange="javascript:alert(this.value);" onclick="javascript:if (document.selectkey!=1) {this.value=-1;document.selectkey=1;}" >
  2. <option value="1">a</option>
  3. <option value="2">b</option>
  4. <option value="-1">...</option>
  5. </select>
复制代码


一个折衷的办法。
作者: imbiss    时间: 2006-01-08 21:43
不明白。这个selectkey是什么属性？
从代码看,好像要达到这个效果: 如果选择的值不等于1，就让他等于1.
还是没有解决问题,因为有一个多余的".."选项啊,这和多余的"请选择"选项有什么不一样?
作者: HonestQiao    时间: 2006-01-09 09:54
原帖由 imbiss 于 2006-1-8 21:43 发表
不明白。这个selectkey是什么属性？
从代码看,好像要达到这个效果: 如果选择的值不等于1，就让他等于1.
还是没有解决问题,因为有一个多余的".."选项啊,这和多余的"请选择"选项有什么不一样?



onclick的行动比onchange的速度要快。

如果你不改变值，你是没有看办法获得其结果的。

所以首先用onclick把值付给一个不应该被选择的值，那么你选择了选项，就会发生onchange。

而我们仅仅需要对第一次的操作进行onclick处理，所以用一个key来标识是否处理。

在现有的表单机制下，直接操作于表单本身，没有更好的办法。

如果进行变通，那方法就太多了。

最简单的一个例子，结合DIV标签做一个层，来显示选项，这样子你点什么选项都可以反映的。
作者: imbiss    时间: 2006-01-09 21:22
感谢提醒。关键是onclick要早于onchange事件
onclick事件把option选项的值设置为一个不存在的值，索引-1.这样onchange的时候，所有的选项都能点击了。

下面两个例子比较了用和不用onclick的区别。

  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  3. <HTML>
  4. <HEAD>
  5. <TITLE> New Document </TITLE>
  6. <META NAME="Generator" CONTENT="EditPlus">
  7. <META NAME="Author" CONTENT="">
  8. <META NAME="Keywords" CONTENT="">
  9. <META NAME="Description" CONTENT="">
  10. </HEAD>
  11. <script language="javascript" type="text/javascript">
  12. <!--

  14. function changeit(){   
  15.         var value = document.getElementById("test").value;                
  16.         alert("your choice is "+value);
  17. }

  19. function resetchoice(){       
  20.         document.getElementById("test").selectedIndex = -1;               
  21. }
  22. -->
  23. </script>

  25. <BODY>
  26. <select name="test" id="test" onchange="changeit();" onclick="resetchoice();">
  27. <option value="1">aaa</option>
  28. <option value="2">bbb</option>
  29. <option value="3">ccc</option>
  30. <option value="4">ddd</option>
  31. </select>

  33. <p>test 2 normal select without onclick event</p>
  34. <select name="test" id="test" onchange="changeit();" >
  35. <option value="1">aaa</option>
  36. <option value="2">bbb</option>
  37. <option value="3">ccc</option>
  38. <option value="4">ddd</option>
  39. </select>
  40. </BODY>
  41. </HTML>
复制代码

具体例子已经用在我的blog上，地址参见一楼。
作者: crazysoul    时间: 2006-01-13 18:33
原帖由 imbiss 于 2006-1-7 18:09 发表
To crazysoul: 何谓主动触发，请大侠明示
To cooljia :我不用java，所以没去过java板块。
主动触发即可以，即直接调用onchange()方法



你可以在页面的onload事件里加个调用,如
onload = function(){
xxx.onchange(); //这就是直接触发onchange事件
}
作者: imbiss    时间: 2006-01-13 18:54
原帖由 crazysoul 于 2006-1-13 18:33 发表




你可以在页面的onload事件里加个调用,如
onload = function(){
xxx.onchange(); //这就是直接触发onchange事件
}


我要点击才触发，不要自动触发。
作者: crazysoul    时间: 2006-01-14 11:28
原帖由 imbiss 于 2006-1-13 18:54 发表


我要点击才触发，不要自动触发。


那是第一次初始化用的触发,你不是说当有一个一开始就被选中时,再选择没有反映吗,就是用来处理这种情况的.
作者: imbiss    时间: 2006-01-14 19:56
你是说onload放在select里面吗？ like
<select name="test" onload="resetChoice(); ">

可是,我用ajax只是重写了option,select不会重写，而且也不会被再次onload. onload只能用一次。所以还是用onclick好。
作者: crazysoul    时间: 2006-01-19 15:21
原帖由 imbiss 于 2006-1-14 19:56 发表
你是说onload放在select里面吗？ like
<select name="test" onload="resetChoice(); ">

可是,我用ajax只是重写了option,select不会重写，而且也不会被再次onload. onload只能用一次 ...


真是晕死,是页面onload
select没有onload事件的,建议查找下DHTML手册.
什么是初始化啊?当然就是第一次执行时才叫初始化,而且有且仅有一次.
这种对话真是头痛.

[ 本帖最后由 crazysoul 于 2006-1-19 15:24 编辑 ]
作者: imbiss    时间: 2006-01-19 17:22
原帖由 crazysoul 于 2006-1-19 15:21 发表


真是晕死,是页面onload
select没有onload事件的,建议查找下DHTML手册.
什么是初始化啊?当然就是第一次执行时才叫初始化,而且有且仅有一次.
这种对话真是头痛.

是啊，onload只有一次，可是这个下来菜单会多次改变，所以你的方法不适合。
作者: crazysoul    时间: 2006-01-22 00:52
原帖由 imbiss 于 2006-1-19 17:22 发表

是啊，onload只有一次，可是这个下来菜单会多次改变，所以你的方法不适合。


真是受不了你
<body onload="init()">
<script type="text/javascript">
function init()
{
    document.getElementById('selectobj').onchange();
}

function changed()
{
    alert("changed");
}
</script>

<select id="selectobj" onchange="changed()">
<option>a</option>
<option>b</option>
</select>
作者: imbiss    时间: 2006-01-23 21:26
我看了你的代码，觉得你还是没有明白我的意图。
我并不是需要初始化的时候，调用onchange.

我想要得效果是，
  选择a,弹出 alert a,  关闭下拉选择框
  再次选择a,再次弹出a, 关闭下拉选择框
  再再次选择a,再再弹出 alert a,  关闭下拉选择框
  再再再次选择a,再再再次弹出a, 关闭下拉选择框
  ...........
13楼的帖子就是实现这个效果的。
我试验了你的代码，好像不能达到这个目的。



欢迎光临 Chinaunix (http://bbs.chinaunix.net/) Powered by Discuz! X3.2