自己觉得不错,希望广大网友指正,共同切磋进步。
功能:
1.点击下拉框中的链接,打开新页面。
2.跨平台
3.点击已选中链接也能打开网页条件3使用select的onchange事件一般来说做不了。
所以上网去找了一下发现了一个非常棒的实现方式见下文代码<script style="text/javascript">
function simOptionClick4IE(){
var evt=window.event  ;
var selectObj=evt?evt.srcElement:null;
// IE Only
if (evt && selectObj &&  evt.offsetY && (evt.offsetY > selectObj.offsetHeight || evt.offsetY<0 ) ) { // 记录原先的选中项
var oldIdx = selectObj.selectedIndex; setTimeout(function(){
var option=selectObj.options[selectObj.selectedIndex];
// 此时可以通过判断 oldIdx 是否等于 selectObj.selectedIndex
// 来判断用户是不是点击了同一个选项,进而做不同的处理.
showOptionValue(option) }, 60);
}
}function showOptionValue(opt){
window.open(opt.value,'_blank');
}
</script><select class="select" onclick="simOptionClick4IE()">
<option value=""></option>
<option onclick="showOptionValue(this)" value="http://www.google.cn" >www.google.cn</option>
<option onclick="showOptionValue(this)" value="http://www.sina.com.cn">www.sina.com.cn</option>
</select>
哇完美,IE和FF都可以使用,而且能打开已选中的链接;但是在Google出了Chorme以后我试了一下,Chorme竟然不能用,汗~想了半天,onchange实现最简单(在完成同样的功能的前提下简单的就是最好的),如果能解决点“击已选中option也能打开链接”的问题,就行了。而且还不用写一堆JS代码。既然要onchange,那我在选择之前清空select的value不就行了?试了几次之后有了如下代码。<select class="select" onchange="if(this.value != ''){window.open(this.value)}" onmousedown="this.value=''">
<option value=""></option>
<option value="http://www.google.cn" >www.google.cn</option>
<option value="http://www.sina.com.cn">www.sina.com.cn</option>
</select>开始是用onclick事件的,但是onclick让我失望了,点击之后select的value值没有变化,倒是弹出的optino会去选择index=0的那一条。经过尝试发现使用简单的onmousedown就能解决问题,开心之余,上来分享一下。希望他家把帖子炒热了,帮助需要使用“下拉框尤其那个链接”的朋友在baidu和google上找到本解决方法。