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 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 Javascript
基于Jquery的简单图片切换效果
Jan 06 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
Vue弹出菜单功能的实现代码
Sep 12 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
js函数和this用法实例分析
Mar 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
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
js 调整select 位置的函数
2008/02/21 Javascript
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
Vue组件开发初探
2017/02/14 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
Python读大数据txt
2016/03/28 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
关于Python的一些学习总结
2018/05/25 Python
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
户外活动总结范文
2014/04/30 职场文书
大学生学期个人总结
2015/02/12 职场文书
2015年老干部工作总结
2015/04/23 职场文书
电话营销开场白
2015/05/29 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书