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自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 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设计模式之调解者模式的深入解析
2013/06/13 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
php计算函数执行时间的方法
2015/03/20 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
让FireFox支持innerText的实现代码
2009/12/01 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
使用Python函数进行模块化的实现
2019/11/15 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
体育学院毕业生自荐信
2013/11/03 职场文书
高中生学习生活的自我评价
2013/11/27 职场文书
安全生产承诺书
2014/03/26 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
公司2014年度工作总结
2014/12/10 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
Python selenium的这三种等待方式一定要会!
2021/06/10 Python