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 新浪网易的评论块制作
Jul 01 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
jquery中键盘事件小结
Feb 24 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 Javascript
原生JS实现九宫格抽奖
Sep 13 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
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
Bootstrap框架安装使用详解
2017/01/21 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
微信小程序中为什么使用var that=this
2019/08/27 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
js实现计算器功能
2020/08/10 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
python3调用windows dos命令的例子
2019/08/14 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
PyTorch-GPU加速实例
2020/06/23 Python
Python 绘制可视化折线图
2020/07/22 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
python os.listdir()乱码解决方案
2021/01/31 Python
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
本科生个人求职自荐信
2013/09/26 职场文书
HR喜欢的自荐信格式
2013/10/08 职场文书
门卫工作岗位职责
2013/12/17 职场文书
办公室前台岗位职责
2014/01/04 职场文书
商场主管竞聘书
2014/03/31 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
公司停电通知
2015/04/15 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python
oracle重置序列从0开始递增1
2022/02/28 Oracle
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS