JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转


Posted in Javascript onNovember 25, 2019

程序要求:

编写一个html文件的网页代码,页面包含一个下拉列表框、一个文本框和一个按钮,下拉列表框选择要去的网站,当选择完毕后文本框中出现对应的网址。点击确认跳转按钮后访问文本框中出现的网址。

实现效果:

JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转

实现代码:

<!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实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
用JS实现一个TreeMenu效果分享
Aug 28 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
React进阶学习之组件的解耦之道
Aug 07 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
详解可以用在VS Code中的正则表达式小技巧
May 14 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 #jQuery
如何优雅地在Node应用中进行错误异常处理
Nov 25 #Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 #jQuery
uni-app实现点赞评论功能
Nov 25 #Javascript
js prototype深入理解及应用实例分析
Nov 25 #Javascript
KnockoutJS数组比较算法实例详解
Nov 25 #Javascript
js实现简单的日历显示效果函数示例
Nov 25 #Javascript
You might like
一个php作的文本留言本的例子(一)
2006/10/09 PHP
《PHP编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
prototype 的说明 js类
2006/09/07 Javascript
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
基于ionic实现下拉刷新功能
2018/05/10 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
Python程序语言快速上手教程
2012/07/18 Python
python统计cpu利用率的方法
2015/06/02 Python
python实现八大排序算法(2)
2017/09/14 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
童装店创业计划书
2014/01/09 职场文书
毕业寄语大全
2014/04/09 职场文书
安全月活动总结
2014/05/05 职场文书
五好关工委申报材料
2014/05/31 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
集结号观后感
2015/06/08 职场文书
请假条应该怎么写?
2019/06/24 职场文书
高一作文之乐趣
2019/11/21 职场文书