您的位置:首页 > 运维架构

select中option改变时跳转到其他页面

2016-07-17 21:14 405 查看
html代码:

<div class="friend_link">
<select onchange=mbar(this) name="select">
<option selected>友谊链接</option>
<option value="http://www.163.com">163</option>
<option value="http://www.flash8.net/">flash8</option>
<option value="http://www.baidu.com">百度</option>
<option value="http://www.baidu.com">百度</option>
<option value="http://www.baidu.com">百度</option>
<option value="http://www.baidu.com">百度</option>
</select>
</div>

js代码:

<script type="text/javascript">

function mbar(sobj) {
var docurl =sobj.options[sobj.selectedIndex].value;
if (docurl != "") {
open(docurl,'_blank');
sobj.selectedIndex=0;
sobj.blur();
}
}

</script>

效果以下图:



跳转到百度试试:



原理是当select当选中的值改变的时候,获得value值,使用open函数,跳转到这个value所指定的url。

了解1下open函数:

window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')

window.open 弹出新窗口的命令;  

'page.html' 弹出窗口的文件名;  

'newwindow' 弹出窗口的名字(不是文件名),非必须,可用空''代替;  

height=100 窗口高度;  

width=400 窗口宽度;  

top=0 窗口距离屏幕上方的象素值;  

left=0 窗口距离屏幕左边的象素值;  

toolbar=no 是不是显示工具栏,yes为显示;  

menubar,scrollbars 表示菜单栏和转动栏。  

resizable=no 是不是允许改变窗口大小,yes为允许;  

location=no 是不是显示地址栏,yes为允许;  

status=no 是不是显示状态栏内的信息(通常是文件已打开),yes为允许;  

</SCRIPT> js脚本结束
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: