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 相关文章推荐
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
怎么清空javascript数组
May 11 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
详解JavaScript匿名函数和闭包
Jul 10 Javascript
Vue实现菜单切换功能
Nov 08 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中cookie的作用域
2008/03/27 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
jquery动态加载js三种方法实例
2013/08/03 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
SVG实现时钟效果
2018/07/17 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
在Python中使用第三方模块的教程
2015/04/27 Python
Python实现各种排序算法的代码示例总结
2015/12/11 Python
wxpython实现图书管理系统
2018/03/12 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
详解Python中的正则表达式
2018/07/08 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
基于FME使用Python过程图解
2020/05/13 Python
Python 发送邮件方法总结
2020/08/10 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
佳能法国商店:Canon法国
2019/02/14 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
教师年终个人自我评价
2013/10/04 职场文书
单位未婚证明范本
2014/01/18 职场文书
医院院务公开实施方案
2014/05/03 职场文书
维修工先进事迹
2014/05/29 职场文书
葬礼主持词
2015/07/02 职场文书