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通过Ajax提交表单并返回结果
Jul 31 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 Javascript
原生JavaScript实现轮播图
Jan 10 Javascript
element tree树形组件回显数据问题解决
Aug 14 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去除换行(回车换行)的三种方法
2014/03/26 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
PHP5.3新特性小结
2016/02/14 PHP
2010年最佳jQuery插件整理
2010/12/06 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
实例解析Array和String方法
2016/12/14 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
如何使用angularJs
2017/05/08 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
CAD制图人员的自荐信
2014/02/07 职场文书
致800米运动员广播稿
2014/02/16 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
死亡赔偿协议书
2015/01/28 职场文书
2015年教研组工作总结
2015/05/04 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
《分数乘法》教学反思
2016/02/24 职场文书
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技