不变的变
  • 3
  • 新人请关照

select如何选中option后自动跳转到对应的网页?

大家好!
我自己用html5编了一个程序。想实现的功能是通过选择select下的option,选中后,网页主体位置显示跳转到相对应的网页,但由于本人编程经验不足,还想请教各位大侠如何实现。源代码如下,
其中同目录下已经放置了包含了主文件及test1.html,test2.html,test3.html共计4个文件

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8"/>
    <title>select触发链接</title>
    
</head>

<body style="margin: 0">
    <table style="background: DarkGray;width: 100%;height: 890px;">
        
            <tr style="background: Cornsilk">

                <td colspan="3" style="height: 10%;text-align:center;margin:50px 0; font:normal 56px/56px 'MicroSoft YaHei'">标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题</td>

            </tr>

            <tr>
                <td style="background: Cornsilk; width:12%; text-align:center;margin:50px 0; font:normal 24px/24px 'MicroSoft YaHei';color:#ffffff">
                    
                    <form action="" >

                        <select name='test' >
                              <option value='test1'>网页1</option>
                              <option value='test2'>网页2</option>
                              <option value='test3'>网页3</option>
                        </select>    
                    </form>

                </td>

                <td  colspan="2">
                    
                    <iframe 
                    src="test1.html"; width="100%"; height="100%" name="test"
                    
                    ></iframe>
                    
                </td>


            </tr>

            <tr style="background: Cornsilk"><td colspan="3" style="height: 2%"></td>
            </tr>
        
    </table>

</body>
</html>

非常感谢!

阅读 412
评论
    4 个回答

    给 select 加上 onchange 事件就好了
    在线测试
    1、给 iframe 加上 id 为 main
    然后使用下面的代码

    <select name='test' onchange="document.querySelector('#main').src=this.value">
        <option value='http://baidu.com'>百度</option>
        <option value='http://qq.com'>QQ</option>
        <option value='http://ele.me'>饿了么</option>
    </select>
    评论 赞赏