web前端实现下拉列表选择框与超链接的结合

最新推荐文章于 2025-11-03 09:39:28 发布

原创最新推荐文章于 2025-11-03 09:39:28 发布 · 2.2k 阅读

9 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在Web前端将下拉列表选择框与超链接相结合，通过在option value中添加网址并运用JavaScript实现。示例代码可在DW CS6环境下运行，适合初学者学习。

用普通的a href是无法实现这个结合的，需要在optin value 后加入网址，并且加入下面的js代码

<SCRIPT language=JavaScript>
var select = document.querySelector('select');select.onchange = function(){	window.location=this.value;}</SCRIPT>

具体代码如下
这个是可以运行出来的
可以进去链接dw版本是cs6
本人是学生目前还在学习阶段

<body>
<select name="xiaoyuan" onchange="javascript:window.open(this.options[this.selectedindex].value)">
<option value="Untitled-1.html"selected="selected">----333------</option>	<option value="http://baidu.com/"selected>222</option>	<option value="Untitled-1.html"selected>111</option>  </select>
<SCRIPT language=JavaScript>
var select = document.querySelector('select');select.onchange = function(){	window.location=this.value;}</SCRIPT>
</body>