牛骨文教育服务平台(让学习变的简单)
博文笔记

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

创建时间:2014-12-04 投稿人: 浏览次数:6715

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。

了解一下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脚本结束

声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。