高手帮帮忙忙吧!高分奉送!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 内容进行修改得到该文件
*/
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>