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 break指定标签打破多层循环示例
Jan 20 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
javascript 原型链维护和继承详解
Nov 26 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
Node如何后台数据库使用增删改查功能
Nov 21 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 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漏洞全解(详细介绍)
2012/11/13 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
在Vue中使用Compass的方法
2018/03/02 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
Python实现的简单万年历例子分享
2014/04/25 Python
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
Django实现文件上传下载
2019/10/06 Python
Python 使用type来定义类的实现
2019/11/19 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
英语演讲稿范文
2014/01/03 职场文书
生物学学生自我评价
2014/01/17 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
再谈python_tkinter弹出对话框创建
2022/03/20 Python
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript