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>

非常感谢!

阅读 3.8k
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>

select选择一般不做跳转!

你可以把select改为div,设置div的点击事件。和select效果一样。

               
<form action="" >
    <div id='test' >
          <span id='test1'>网页1</span>
          <span id='test2'>网页2</span>
          <span id='test3'>网页3</span>
    </div>    
</form>

<scripttype="text/javascript">
    $("#test1").click(){windows.loacation.href="xxx"}

</script>

获取下拉框的值,修改iframe属性src的值

新手上路,请多包涵

根据象棋王子提供的方法,网页中显示的结果是这样的:
主页面1.jpg
是不是我哪个地方出问题了?

零玖大侠,我想达到的效果是下图这样的,就是选择其中一个option,其中间主体的页面跳转到相应的test1,test2,test3去,而不是整个全都跳转了
主页面2.jpg
这个可以实现的吗?

推荐问题
宣传栏