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 到 JQuery (1)学习小结
Feb 12 Javascript
10个实用的脚本代码工具
May 04 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
jQuery渐变发光导航菜单的实例代码
Mar 27 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 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
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
用JS将搜索的关键字高亮显示实现代码
2013/11/08 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
python实现下载指定网址所有图片的方法
2015/08/08 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
Python解析json文件相关知识学习
2016/03/01 Python
python和shell获取文本内容的方法
2018/06/05 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
使用Django清空数据库并重新生成
2020/04/03 Python
Django ORM filter() 的运用详解
2020/05/14 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
HTML5标签使用方法详解
2015/11/27 HTML / CSS
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
装潢设计专业推荐信模板
2013/11/26 职场文书
英语专业学生个人求职信
2014/01/28 职场文书
运动会获奖感言
2014/02/11 职场文书
《阳光》教学反思
2014/02/23 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
2014年租房协议书范本
2014/10/30 职场文书
总经理检讨书范文
2015/02/16 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
安全生产协议书
2016/03/22 职场文书