87,955
社区成员
发帖
与我相关
我的任务
分享请教关于select表单的option事件
下面的可以用pop显示option的text，希望能用于限制select宽后，模拟title标签的功能。
可是，如果不是多选表单，如何在鼠标经过option的时候提示呀
onchange只能在选择变化的时候，又没有其他办法，多谢==========================================
<SCRIPT LANGUAGE="JavaScript">
<!--
oPopup = window.createPopup();
function showtitle(obj){
if(obj.selectedIndex!=-1){
var oPopBody = oPopup.document.body
oPopBody.style.backgroundColor = "lightyellow";
oPopBody.style.border = "solid black 1px";
oPopBody.innerHTML = obj.options[obj.selectedIndex].text;
oPopup.show(event.screenX, event.screenY,obj.options[obj.selectedIndex].text.length*10, 25);
}
}
//-->
</SCRIPT>
<select name="possible" size=10 MULTIPLE style="width=200" onchange = "showtitle(this)">
<option value="111">111111111111mhjk711111111tyujrrr111111111111</option>
<option value="222">222</option>
<option value="333">333</option>
<option value="444">444</option>
<option value="555">5523r5</option>
<option value="333">33rhg3</option>
<option value="444">44wrt4ewwe</option>
<option value="555">55wrtggg5</option>
</select>
==========================================
可是，如果不是多选表单，如何在鼠标经过option的时候提示呀
onchange只能在选择变化的时候，又没有其他办法，多谢==========================================
<SCRIPT LANGUAGE="JavaScript">
<!--
oPopup = window.createPopup();
function showtitle(obj){
if(obj.selectedIndex!=-1){
var oPopBody = oPopup.document.body
oPopBody.style.backgroundColor = "lightyellow";
oPopBody.style.border = "solid black 1px";
oPopBody.innerHTML = obj.options[obj.selectedIndex].text;
oPopup.show(event.screenX, event.screenY,obj.options[obj.selectedIndex].text.length*10, 25);
}
}
//-->
</SCRIPT>
<select name="possible" size=10 MULTIPLE style="width=200" onchange = "showtitle(this)">
<option value="111">111111111111mhjk711111111tyujrrr111111111111</option>
<option value="222">222</option>
<option value="333">333</option>
<option value="444">444</option>
<option value="555">5523r5</option>
<option value="333">33rhg3</option>
<option value="444">44wrt4ewwe</option>
<option value="555">55wrtggg5</option>
</select>
==========================================
...全文
请发表友善的回复…
发表回复
emu_ston 2004-10-12
- 打赏
- 举报
<body onmouseover="hide()">
<select name="possible" size=10 MULTIPLE style="width=200" onmouseover="show()">
<option value="111">111111111111mhjk711111111tyujrrr111111111111</option>
<option value="222">222</option>
<option value="333">333</option>
<option value="444">444</option>
<option value="555">5523r5</option>
<option value="333">33rhg3</option>
<option value="444">44wrt4ewwe</option>
<option value="555">55wrtggg5</option>
</select>
<span style="position:absolute;left:100;top:100;display:none" id=s>
<iframe style="width:100;height:33;margin-right:-18;margin-top:-13;z-index:2" id=tips scrollbar="0">
</span>
</iframe>
<script>
tips.document.bgColor="yellow";
function show(){
var elm = event.srcElement;
tips.document.body.innerHTML = elm.options[Math.floor((event.y-elm.offsetTop)/((elm.offsetHeight-5)/elm.size))].text.substring(0,8);
s.style.top=event.y;
s.style.left=event.x;
s.style.display="block";
event.cancelBubble=true
}
function hide(){
s.style.display="none";
}
</script>
</body>
没有仔细计算好位置，可以再调一下。
<select name="possible" size=10 MULTIPLE style="width=200" onmouseover="show()">
<option value="111">111111111111mhjk711111111tyujrrr111111111111</option>
<option value="222">222</option>
<option value="333">333</option>
<option value="444">444</option>
<option value="555">5523r5</option>
<option value="333">33rhg3</option>
<option value="444">44wrt4ewwe</option>
<option value="555">55wrtggg5</option>
</select>
<span style="position:absolute;left:100;top:100;display:none" id=s>
<iframe style="width:100;height:33;margin-right:-18;margin-top:-13;z-index:2" id=tips scrollbar="0">
</span>
</iframe>
<script>
tips.document.bgColor="yellow";
function show(){
var elm = event.srcElement;
tips.document.body.innerHTML = elm.options[Math.floor((event.y-elm.offsetTop)/((elm.offsetHeight-5)/elm.size))].text.substring(0,8);
s.style.top=event.y;
s.style.left=event.x;
s.style.display="block";
event.cancelBubble=true
}
function hide(){
s.style.display="none";
}
</script>
</body>
没有仔细计算好位置，可以再调一下。
prcgolf 2004-10-11
- 打赏
- 举报
up
feifeizaizhe 2004-10-11
- 打赏
- 举报
你可以建立一个隐含的层，然后当鼠标经过隐含的层的时候触发SELECT的某个事件
drifters 2004-10-11
- 打赏
- 举报
up
风斧 2004-10-10
- 打赏
- 举报
顺便问一句，这个探出来的窗口，如果我们在空白地方单击的画，它会消失，机制是怎样的？
风斧 2004-10-10
- 打赏
- 举报
<option value="222"><span id="op2" onMouseOver="window.cancelBubble=true;alert('hehe')">222</span></option>
我试图这样做，不成功，dhtml手册中，onmouseover可以应用到span。
我试图这样做，不成功，dhtml手册中，onmouseover可以应用到span。
drifters 2004-10-10
- 打赏
- 举报
up
是是非非 2004-10-10
- 打赏
- 举报
楼上的应该可以实现，不过难度好像比较大哦
drifters 2004-10-10
- 打赏
- 举报
下午外出时想到的思路
能否根据鼠标在select表单内的位置来判断？
我js水平很差，还请高手来测试一下
能否根据鼠标在select表单内的位置来判断？
我js水平很差，还请高手来测试一下
bflovesnow 2004-10-10
- 打赏
- 举报
的确难，UP下
tianch 2004-10-10
- 打赏
- 举报
<table>
<tr>
<td onMouseOver="alert('ok');">
<select><option>1</option><option>2</option></select>
</td>
</tr>
</table>
用表格的事件来处理，不知道能不能达到你的要求
<tr>
<td onMouseOver="alert('ok');">
<select><option>1</option><option>2</option></select>
</td>
</tr>
</table>
用表格的事件来处理，不知道能不能达到你的要求
kingchang2000 2004-10-10
- 打赏
- 举报
好象鼠标仅仅经过是没有什么事件触发的呀，我觉得很难
blestcc 2004-10-10
- 打赏
- 举报
试了几种方法都无法解决，看来只好模拟select了
看高手出来解决问题
看高手出来解决问题
