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 相关文章推荐
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
微信小程序form表单组件示例代码
Jul 15 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
vue实现的组件兄弟间通信功能示例
Dec 04 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
JS中作用域以及变量范围分析
Jul 18 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 Javascript
超详细小程序定位地图模块全系列开发教学
Nov 24 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
用Socket发送电子邮件
2006/10/09 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
extjs 为某个事件设置拦截器
2010/01/15 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
js自定义回调函数
2015/12/13 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
vue axios 二次封装的示例代码
2017/12/08 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
javascript数组的定义及操作实例
2019/11/10 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
Python高级用法总结
2018/05/26 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
幼儿园教研活动方案
2014/01/19 职场文书
代办委托书怎样写
2014/04/08 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
任命书格式模板
2015/09/22 职场文书
《酸的和甜的》教学反思
2016/02/18 职场文书
使用MybatisPlus打印sql语句
2022/04/22 SQL Server
nginx rewrite功能使用场景分析
2022/05/30 Servers