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

bukebuhao 2008-02-02 11:34:47
如何实现重复选择同一项，可以连续触发事件，选择完之后，必须还是显示当前选择的项。例如 “//选择后,让第一项被选中,这样,就有Change啦.
document.all.sel.options[0].selected=true; “这样不可，只要实现重复选择同一项，可连续触发事件就可，在线等等，着急！
...全文
960 24 打赏 收藏 转发到动态 举报
写回复
用AI写文章
24 条回复
切换为时间正序
请发表友善的回复…
发表回复
I_T_H_D_69 2011-10-18
  • 打赏
  • 举报
 回复
楼上的有点小问题，稍微改了一下，解决了，希望有用。
<select onmousedown="this.sindex = this.selectedIndex; this.selectedIndex = -1;" onmousemove="if(this.sindex) this.selectedIndex = this.sindex;" onchange="this.sindex = this.selectedIndex;">
wonton2 2011-06-30
  • 打赏
  • 举报
 回复
<select onmousedown="this.sindex = this.selectedIndex; this.selectedIndex = -1;" onblur="if(this.sindex) this.selectedIndex = this.sindex;" onchange="this.sindex = undefined;">
aa805617894aa 2011-01-19
  • 打赏
  • 举报
 回复
我也遇到了这个问题
ogmw 2008-07-01
  • 打赏
  • 举报
 回复
在onchange事件函数后，加入两句
var tmp_selectedIndex = this.selectedIndex;
this.selectedIndex = -1;
我认为这是最简单的办法。
ogmw 2008-07-01
  • 打赏
  • 举报
 回复
在onchange事件函数后，加入两句
var tmp_selectedIndex = this.selectedIndex;
this.selectedIndex = -1;
我认为这是最简单的办法。
ogmw 2008-07-01
  • 打赏
  • 举报
 回复
在onchange事件函数后，加入两句
var tmp_selectedIndex = this.selectedIndex;
this.selectedIndex = -1;
我认为这是最简单的办法。
pears2017ms 2008-02-03
  • 打赏
  • 举报
 回复
ls说不明白lz意思的请看这个：
有人玩魔兽世界吗？ 有人应该会用bigfoot插件吧？
那个插件可以选择不同的区查看插件与服务器的连接状态，他就可以每次选同一个区（同一个选项）得到不同的返回的毫秒数，因此select的每次选择同一项都触发事件是肯定可以的。

不过俺还在研究中。。。。。应该不是一个单纯的onchange
bukebuhao 2008-02-03
  • 打赏
  • 举报
 回复 


<HTML> 

<HEAD> 

<META   HTTP-EQUIV="Content-Type"   Content="text/html;   charset=x-sjis"> 

<TITLE> </TITLE> 

</HEAD> 

<script   language=javascript> 

<!-- 

document.write(" <div   style=\"z-index:2;position:absolute;   display:none;   cursor:hand;   font-size:12px;   background:#FFFFFF;   border:1px   solid   #999999;   text-indent:4px;\"   id=\"lstSelect\"> </div> "); 



function   SetList(oInput,   oButton,   oText)   { 

var   point   =   GetXY(document.getElementById(oInput)); 

oTempInput   =   document.getElementById(oInput); 

SetInnerHTML(oInput,   oText); 

with   (lstSelect.style)   { 

left   =   point.x; 

top   =   point.y   +   document.getElementById(oInput).offsetHeight; 

width   =   document.getElementById(oInput).offsetWidth; 

height   =   document.getElementById(oInput).offsetHeight; 

display   =   ""; 

} 

} 



function   SetInnerHTML(oInput,   oText)   { 

var   tempstr   =   ""; 

var   bgColor   =   "#CCCCCC"; 

var   mystyle   =   "style=\"font-family:Arial;   height:18px;   padding-top:2px;\"   onMouseOver=\"this.style.background='"   +   bgColor   +   "'\"   onMouseOut=\"this.style.background='#FFFFFF'\"   onclick=\"SetValue('"   +   oInput   +   "',   '"   +   oText   +   "',   this.value)\""; 

tempstr   =   " <div   "   +   mystyle   +   "   value=\"Hardware\"> Hardware </div> "; 

tempstr   +=   " <div   "   +   mystyle   +   "   value=\"Software\"> Software </div> "; 

tempstr   +=   " <div   "   +   mystyle   +   "   value=\"Label\"> Label </div> "; 

tempstr   +=   " <div   "   +   mystyle   +   "   value=\"Ribbon\"> Ribbon </div> "; 

tempstr   +=   " <div   "   +   mystyle   +   "   value=\"3rd   Party\"> 3rd   Party </div> "; 

tempstr   +=   " <div   "   +   mystyle   +   "   value=\"a-Sol   Software\"> a-Sol   Software </div> "; 

tempstr   +=   " <div   "   +   mystyle   +   "   value=\"Others\"> Others </div> "; 



lstSelect.innerHTML   =   tempstr; 

} 



function     SetValue(oInput,   oText,   myvalue)   { 

document.getElementById(oInput).value   =   myvalue; 

document.getElementById(oText).value   =   myvalue; 

lstSelect.style.display   =   "none"; 

} 



function   GetXY(aTag)   { 

var   oTmp   =   aTag; 

var   pt   =   new   Point(0,0); 

do   { 

pt.x   +=   oTmp.offsetLeft; 

pt.y   +=   oTmp.offsetTop; 

oTmp   =   oTmp.offsetParent; 

}   while(oTmp.tagName   !=   "BODY"); 

return   pt; 

} 



function   Point(iX,   iY)   { 

this.x   =   iX; 

this.y   =   iY; 

} 



function   unDisplay()   { 

lstSelect.style.display   =   "none"; 

} 



function   bodyOnkeydonw()   { 

if   (event.keyCode   ==   27   &&   lstSelect.style.display   ==   "")   { 

unDisplay(); 

} 

} 

--> 

</script> 

<BODY   onfocus="unDisplay()"   onkeydown="bodyOnkeydonw()"> 

<P> 

<INPUT   id=text1   name=text1   style="WIDTH:   182px;   Height   :   25px;   font-size   :   12pt"   readonly   onclick="SetList('text1',   'select1',   'text3')"> 

<INPUT   type=button   id=select1   name=select1   style="MARGIN-LEFT:   -30px;   WIDTH:   25px;   Height   :   25px"   onfocus="SetList('text1',   'select1',   'text3')"   value="仴"> 

  

<INPUT   id=text3   name=text3   style="WIDTH:   182px;   Height   :   25px;   font-size   :   12pt"> 

<br> 

<INPUT   id=text2   name=text2   style="WIDTH:   182px;   Height   :   25px;   font-size   :   12pt"   readonly   onclick="SetList('text2',   'select2',   'text4')"> 

<INPUT   type=button   id=select2   name=select2   style="MARGIN-LEFT:   -30px;   WIDTH:   25px;   Height   :   25px"   onfocus="SetList('text2',   'select2',   'text4')"   value="仴"> 

  

<INPUT   id=text4   name=text4   style="WIDTH:   182px;   Height   :   25px;   font-size   :   12pt"> 

</P> 

</BODY> 

</HTML>
bukebuhao 2008-02-03
  • 打赏
  • 举报
 回复
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" Content="text/html; charset=x-sjis">
<TITLE></TITLE>
</HEAD>
<script language=javascript>
<!--
document.write("<div style=\"z-index:2;position:absolute; display:none; cursor:hand; font-size:12px; background:#FFFFFF; border:1px solid #999999; text-indent:4px;\" id=\"lstSelect\"></div>");

function SetList(oInput, oButton, oText) {
var point = GetXY(document.getElementById(oInput));
oTempInput = document.getElementById(oInput);
SetInnerHTML(oInput, oText);
with (lstSelect.style) {
left = point.x;
top = point.y + document.getElementById(oInput).offsetHeight;
width = document.getElementById(oInput).offsetWidth;
height = document.getElementById(oInput).offsetHeight;
display = "";
}
}

function SetInnerHTML(oInput, oText) {
var tempstr = "";
var bgColor = "#CCCCCC";
var mystyle = "style=\"font-family:Arial; height:18px; padding-top:2px;\" onMouseOver=\"this.style.background='" + bgColor + "'\" onMouseOut=\"this.style.background='#FFFFFF'\" onclick=\"SetValue('" + oInput + "', '" + oText + "', this.value)\"";
tempstr = "<div " + mystyle + " value=\"Hardware\">Hardware</div>";
tempstr += "<div " + mystyle + " value=\"Software\">Software</div>";
tempstr += "<div " + mystyle + " value=\"Label\">Label</div>";
tempstr += "<div " + mystyle + " value=\"Ribbon\">Ribbon</div>";
tempstr += "<div " + mystyle + " value=\"3rd Party\">3rd Party</div>";
tempstr += "<div " + mystyle + " value=\"a-Sol Software\">a-Sol Software</div>";
tempstr += "<div " + mystyle + " value=\"Others\">Others</div>";

lstSelect.innerHTML = tempstr;
}

function SetValue(oInput, oText, myvalue) {
document.getElementById(oInput).value = myvalue;
document.getElementById(oText).value = myvalue;
lstSelect.style.display = "none";
}

function GetXY(aTag) {
var oTmp = aTag;
var pt = new Point(0,0);
do {
pt.x += oTmp.offsetLeft;
pt.y += oTmp.offsetTop;
oTmp = oTmp.offsetParent;
} while(oTmp.tagName != "BODY");
return pt;
}

function Point(iX, iY) {
this.x = iX;
this.y = iY;
}

function unDisplay() {
lstSelect.style.display = "none";
}

function bodyOnkeydonw() {
if (event.keyCode == 27 && lstSelect.style.display == "") {
unDisplay();
}
}
-->
</script>
<BODY onfocus="unDisplay()" onkeydown="bodyOnkeydonw()">
<P>
<INPUT id=text1 name=text1 style="WIDTH: 182px; Height : 25px; font-size : 12pt" readonly onclick="SetList('text1', 'select1', 'text3')">
<INPUT type=button id=select1 name=select1 style="MARGIN-LEFT: -30px; WIDTH: 25px; Height : 25px" onfocus="SetList('text1', 'select1', 'text3')" value="仴">
 
<INPUT id=text3 name=text3 style="WIDTH: 182px; Height : 25px; font-size : 12pt">
<br>
<INPUT id=text2 name=text2 style="WIDTH: 182px; Height : 25px; font-size : 12pt" readonly onclick="SetList('text2', 'select2', 'text4')">
<INPUT type=button id=select2 name=select2 style="MARGIN-LEFT: -30px; WIDTH: 25px; Height : 25px" onfocus="SetList('text2', 'select2', 'text4')" value="仴">
 
<INPUT id=text4 name=text4 style="WIDTH: 182px; Height : 25px; font-size : 12pt">
</P>
</BODY>
</HTML>
这个是我们自己做的
bukebuhao 2008-02-03
  • 打赏
  • 举报
 回复
谢谢啦!只要实现就可!
Go 旅城通票 2008-02-02
  • 打赏
  • 举报
 回复
什么叫onchange???
就是选择不同的项了才触发这个事件.
一把编程的菜刀 2008-02-02
  • 打赏
  • 举报
 回复
不知道你的意思！
bukebuhao 2008-02-02
  • 打赏
  • 举报
 回复
you ren ma
No_Data_Found 2008-02-02
  • 打赏
  • 举报
 回复
http://blog.csdn.net/snakegod/archive/2004/11/03/165501.aspx


<!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 内容进行修改得到该文件

*/

function ChangeToSelect(obj){

 var selectDiv = document.createElement("table");

 obj.selectDiv=selectDiv;

 obj.options=eval(obj.options);

 selectDiv.style.width=obj.style.width;

 var selectDivTR = selectDiv.insertRow();

 obj.selectDivTR=selectDivTR;

 var defaultValueTD = selectDivTR.insertCell();

 obj.defaultValueTD=defaultValueTD;

 var arrow = selectDivTR.insertCell();

 arrow.style.color='black';

 //arrow.width="17px";

 obj.arrow=arrow;

 

 with(obj.selectDiv)cellSpacing=0,cellPadding=0,border=0,className="selectDiv";

 if (parseInt(obj.style.width+'')-parseInt(obj.style.width+'')==0)

 with(obj.defaultValueTD)innerText = obj.options[0][0],className="defaultSelect2";

 else

 with(obj.defaultValueTD)innerText = obj.options[0][0],className="defaultSelect";

 obj.value=obj.options[0][1];

 obj.text=obj.options[0][0];

 obj.selectedIndex=0;

 with(obj.arrow)innerText=6,className="arrow";

 obj.appendChild(selectDiv);

 //外层Div

 obj.optionDiv = document.createElement("div");

 obj.optionDiv.flag="SELECT";

 //设置下拉菜单选项的坐标和宽度

 with(obj.optionDiv.style) {

  var select = obj.selectDiv;

  var xy = getSelectPosition(select);

  pixelLeft = xy[0] + 10;

  pixelTop = xy[1]+select.offsetHeight + 15;

  width = obj.selectDiv.offsetWidth;

  obj.optionDiv.className = "optionDiv";

  backgroundColor="white";

  if(obj.height!=null)height=obj.height;

  overflowX="hidden";

  overflowY="auto";

 }

 //下拉菜单内容

 obj.Options = new Array();

 

 for (var i=0;i<obj.options.length;i++) {

  obj.Options[i] = obj.optionDiv.appendChild(document.createElement("div"));

 }

 for (i=0;i<obj.Options.length;i++) {

  obj.Options[i].innerText = obj.options[i][0];

  obj.Options[i].Farther=obj;

  obj.Options[i].index=i;

 }

 obj.appendChild(obj.optionDiv);

 

 /*事件*/

 //禁止选择文本

 obj.selectDiv.onselectstart = function() {return false;}

 obj.optionDiv.onselectstart = function() {return false;}

 //下拉菜单的箭头

 obj.arrow.onmousedown = function() {

  this.setCapture();

  this.style.borderStyle="inset";

 }

 obj.arrow.onmouseup = function() {

  this.style.borderStyle="outset";

  this.releaseCapture();

 }

 obj.arrow.onclick = function() {

  event.cancelBubble = true;

  obj.optionDiv.style.visibility = obj.optionDiv.style.visibility=="visible"?"hidden":"visible";

 }

 document.onclick = function() {

  var divs=document.all.tags("DIV");

  for (var i=0;i<divs.length;i++){

   if (divs[i].flag=="SELECT") divs[i].style.visibility="hidden";

  }

 }

 obj.defaultValueTD.onclick = function() {

  event.cancelBubble = true;

  obj.optionDiv.style.visibility = obj.optionDiv.style.visibility=="visible"?"hidden":"visible";

 }

 //移动Option时的动态效果

 for (i=0;i<obj.Options.length;i++) {

  obj.Options[i].attachEvent("onmouseover",function(){moveWithOptions("highlight","white")});

  obj.Options[i].attachEvent("onmouseout",function(){moveWithOptions("","")});

  obj.Options[i].attachEvent("onmouseup",selectedText);

 }

 function moveWithOptions(bg,color) {

  with(event.srcElement) {

   style.backgroundColor = bg;

   style.color = color;

  }

 }

}

function getSelectPosition(obj) {

 var objLeft = obj.offsetLeft;

 var objTop = obj.offsetTop;

 var objParent = obj.offsetParent;

 while (objParent.tagName != "BODY") {

  objLeft += objParent.offsetLeft;

  objTop += objParent.offsetTop;

  objParent = objParent.offsetParent;

 }

 return([objLeft,objTop]);

}

function selectedText() {

 var sel=event.srcElement.Farther;

 sel.selectedIndex=event.srcElement.index;

 sel.value=sel.options[sel.selectedIndex][1];

 sel.text=sel.options[sel.selectedIndex][0];

 with(event.srcElement) {

  sel.defaultValueTD.innerText = innerText;

 }

 sel.optionDiv.style.visibility="hidden";

 //with(sel.defaultValueTD.style)background="highlight",color="white";

 var t="";

 if (sel.onChange!=null)

 t+=sel.onChange;

 if (sel.onchange!=null)

 t+=sel.onchange;



 if (t!=''){

  var cmd=(t).replace(/this/gi,"sel");

  //document.execScrip(cmd,"javascript");

  

  eval(cmd);

 }

 

}// JavaScript Document





</script>



</head>



<body onload="javascipt:ChangeToSelect(document.getElementById('CUL'));">

<span  id="CUL" value="" onchange="alert(this.options[this.selectedIndex][2])" style="display:inline;width:130"  height=80 text="" 

 options="[

 ['进口报关单','43','aaaa'],

 ['出口报关单','44','bbbb'],

 ['进口报关清单','45','ccccc'],

 ['出口报关清单','46','ddddd'],

 ['同步报关单','']

 ]"></span>

 



</body>

</html>
buyaowen 2008-02-02
  • 打赏
  • 举报
 回复
想了个笨方法：
先得到下拉项点开的事件，此时是焦点和鼠标点击（键盘下拉箭头？）等事件
然后再判断鼠标点击一次，或者回车之类的，此时是选中了，最后读选中的值，做操作。

中间有些可能不对，但流程是这样的
No_Data_Found 2008-02-02
  • 打赏
  • 举报
 回复
要不就用div模拟吧
No_Data_Found 2008-02-02
  • 打赏
  • 举报
 回复
onblur="javascript:alert(this.options[this.selectedIndex].value);"
bukebuhao 2008-02-02
  • 打赏
  • 举报
 回复
是不明白，还是没有人能解决呢？专家了，怎不出来，帮解决呢？专家都是事后诸葛亮？
bukebuhao 2008-02-02
  • 打赏
  • 举报
 回复
Onclick事件，你只要一碰到select框，就触发，也不符合要求！
bukebuhao 2008-02-02
  • 打赏
  • 举报
 回复
例子
<%@ page language="java"%>
<%@ page contentType="text/html; charset=Windows-31J"%>
<html:html>
<HEAD>
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<TITLE>text</TITLE>
</HEAD>
<SCRIPT >
function selectedItem(obj) {
alert(obj.value);
}
</SCRIPT>
</head>
<body>
<hr>
<select onchange="selectedItem(this)">
<option value="wo1">haha1</option>
<option value="wo2">haha2</option>
<option value="wo3">haha3</option>
</select>
</body>
</html:html>
选择同一项OPTION是不会触发ONCHANGE事件的,这个我明白，我只是想实现，你选择了一个option之后，触发了相应的事件，例如，你选择了haha1，弹出wo1,随后再选择haha1，也弹出wo1，这是顾客要求的，单一个onchange事件不能解决，有没有其他的办法？还有不明白的吗？
加载更多回复（4）
select如何实现重复选择同一项，可以连续触发事件
http://bbs.csdn.net/topics/200053968 如何实现重复选择同一项，可以连续触发事件，选择完之后，必须还是显示当前选择的项。例如 “//选择后,让第一项被选中,这样,就有Change啦. document.all.sel.options[0].selected=true; “这样不可，只要实现重复选择同一项，可连续触发事件就可，在线等等，着急！ 解决 &lt;...
select重复选择同一项,还可以触发onchange事件
xxxxxxxx1 xxxxxxxx2 xxxxxxxx3 当你重复点击同一项的时候,你会发现根本不会执行onchange方法.大家可以依照下面的方法,就可以实现重复点击的时候也能够实现onchange方法了,如果你们还有更好的方法,欢迎一起交流 var id = document.getElementById("u18"); id.addEventListener('chang
nchange事件时,常会遇到这样一个问题,那就是连续选相同一项时,不触发onchange事件.select的onchange事件就是这样子的.你得有Change(改变),才能触发该事件
我们用Select的onchange事件时,常会遇到这样一个问题,那就是连续选相同一项时,不触发onchange事件.select的onchange事件就是这样子的.你得有Change(改变),才能触发该事件.... 掌握了它的特性后,相应的解决办法也很简单. 请选择 Item 1 Item 2 Item 3 function bao(s) { txt.value+=s;
select标签重复选中相同内容触发onChage事件
$("#select").change(function(){ //doSomething such as alert(1) alert(1); $(this).blur(); }).focus(function(){ $(this)[0].selectedIndex = -1; ...
Select的OnChange()事件
我们用Select的onchange事件时,常会遇到这样一个问题,那就是连续选相同一项时,不触发onchange事件.select的onchange事件就是这样子的.你得有Change(改变),才能触发该事件....掌握了它的特性后,相应的解决办法也很简单.请选择Item 1Item 2Item 3function bao(s){    txt.value+=s;    //选择后,让第一项被选中
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章