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 相关文章推荐
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
js解决movebox移动问题
Mar 29 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
AngularJS实现进度条功能示例
Jul 05 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 Javascript
vue实现简单全选和反选功能
Sep 15 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带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
11个PHP 分页脚本推荐
2011/08/15 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
JQuery 常用操作代码
2010/03/14 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
Python中map和列表推导效率比较实例分析
2015/06/17 Python
简析Python的闭包和装饰器
2016/02/26 Python
python虚拟环境的安装配置图文教程
2017/10/20 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
Django框架请求生命周期实现原理
2020/11/13 Python
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
学校门卫管理制度
2014/01/30 职场文书
丑小鸭教学反思
2014/02/03 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
品牌转让协议书
2014/08/20 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书