JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
程序要求：
编写一个html文件的网页代码，页面包含一个下拉列表框、一个文本框和一个按钮，下拉列表框选择要去的网站，当选择完毕后文本框中出现对应的网址。点击确认跳转按钮后访问文本框中出现的网址。
实现效果：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript事件</title>
</head>
<body>
<select id="select_www" onchange="surf()">
<option value="0" selected="selected">请选择</option>
<option value="http://www.baidu.com">百度</option>
<option value="http://www.163.com">网易</option>
<option value="http://www.qq.com">qq</option>
<option value="http://www.sina.com.cn">新浪</option>
</select>
<input type="text" id="textbox">
<button value="" id="button_www" onclick="jump()">确认跳转</button>
</body>
<script type="text/javascript">
function surf(){
select=document.getElementById("select_www").value;
switch(select){
case "http://www.baidu.com" :
document.getElementById("textbox").value="http://www.baidu.com";
break;
case "http://www.163.com" :
document.getElementById("textbox").value="http://www.163.com";
break;
case "http://www.qq.com" :
document.getElementById("textbox").value="http://www.qq.com";
break;
case "http://www.sina.com.cn" :
document.getElementById("textbox").value="http://www.sina.com.cn";
break;
}
}
function jump(){
location=document.getElementById("textbox").value;
}
</script>
</html>
总结
以上所述是小编给大家介绍的JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
-
本文向大家介绍python3实现跳一跳点击跳跃，包括了python3实现跳一跳点击跳跃的使用技巧和注意事项，需要的朋友参考一下 借鉴了网上一些大神的代码和思路，这里整理一下写出点击跳跃玩跳一跳这个小游戏的思路 一、整体思路 棋子所在的坐标以及下一步所要到的坐标，根据两个坐标计算出两点之间距离进行跳跃。 二、分布思路 1、根据命令截图获取初始图保存到手机，然后上传到本地文件夹 2、将获取的截图放入新
-
本文向大家介绍js实现点击按钮复制文本功能，包括了js实现点击按钮复制文本功能的使用技巧和注意事项，需要的朋友参考一下 最近遇到一个需求，需要点击按钮，复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容，原以为差不多，结果发现根本行不通 尝试了各种办法，最后使了个障眼法，实现了下面的效果 一、原理分析 浏览器提供了 copy 命令 ，可以复制选中的内容 如果是输入框，可以通过 selec
-
本文向大家介绍Android实现按钮点击效果，包括了Android实现按钮点击效果的使用技巧和注意事项，需要的朋友参考一下 1、首先创建一个按钮 2、1中创建的按钮的background用到了btn_st,在drawable下创建btn_st 3、在2中用到的color1和color2，在values的strings中添加 4、java代码 （1）首先获取button Button click
-
本文向大家介绍vue实现点击按钮下载文件功能，包括了vue实现点击按钮下载文件功能的使用技巧和注意事项，需要的朋友参考一下 项目中需要用到文件下载功能,查了资料发现需要用到a标签的特性,但是这边需要用到点击按钮下载,懒得写样式,于是用了以下代码. 在el-button的外面套了一层el-link,如下图,可以正常下载 以下是el-link文字链接的属性 总结 以上所述是小编给大家介绍的vue实现点
-
本文向大家介绍js点击返回跳转到指定页面实现过程，包括了js点击返回跳转到指定页面实现过程的使用技巧和注意事项，需要的朋友参考一下 这个功能之前有简单的带过，这次详细的讲解下原理和存在的问题（由于是运用html5的新API 所以有兼容问题，推荐移动端使用该方法）。 功能描述： 在浏览器中新建标签页并指定一个网址，网页加载完毕后，正常流程下是不允许点击返回的。因为当前标签页的相关历史记录是没有的，所
-
本文向大家介绍js如何实现点击标签文字，文字在文本框出现，包括了js如何实现点击标签文字，文字在文本框出现的使用技巧和注意事项，需要的朋友参考一下 js实现点击标签文字，文字出现在文本框里，下面2种方法实现的功能略有不同，总体来说方法一功能更强大。 第一种方法：随意点击任何标签都会出现在文本框中，如何第二次点击标签，对应的文字就会在文本框中消失。 效果图： 第二种方法：当点击“呐喊教程”标签的时候