javascript使用switch case实现动态改变超级链接文字及地址


Posted in Javascript onDecember 16, 2014

代码很简单,我这里就不多废话了,小伙伴们直接看源码吧。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>动态改变超级链接文字及地址</title>

<link href="css/css.css" rel="stylesheet" type="text/css">

<script type="text/javascript" language="javascript">

function netbankusername()

{

values=form.bankname.options[form.bankname.selectedIndex].value;

texts=form.bankname.options[form.bankname.selectedIndex].text;

  switch (form.bankname.selectedIndex)

    {

       case 1:

        //document.links[0].href="http://www.cmbchina.com/";

        //shownetbank1.innerHTML="http://www.cmbchina.com/(招商银行)";

        document.links[0].href=values;

        shownetbank1.innerHTML=values+"("+texts+")";

        break;

       case 2:

           //document.links[0].href="http://www.cib.com.cn/netbank/netbank.portal";

        //shownetbank1.innerHTML="http://www.cib.com.cn/netbank/netbank.portal(兴业银行)";

        document.links[0].href=values;

        shownetbank1.innerHTML=values+"("+texts+")";

        break;

        default:

            alert(form.bankname.selectedIndex);

        break;

    }

}

</script>

</head>

<body>

<form action="cardinfo_action.asp?action=insert" method="post" name="form" id="form">

<table width="200" border="0">  

<tr>    

<td>请选择</td>

<td>

<select name="bankname" onChange="netbankusername()" id="bankname">

<option value="">请选择</option>

<option value="http://www.cmbchina.com/">招商银行</option>

<option value="http://www.cib.com.cn/netbank/netbank.portal">兴业银行</option>

<option value="http://www.baidu.com">其他</option>

</select></td>  

</table>

</form>

<div style="border:1px solid #ccc;margin:1px;width:600px;height:20px;"><a href="#" target="_blank" id="shownetbank1" name="shownetbank1">未选择银行</a></div>

</body>

</html>

是不是超级简单实用呢。。。经常看看比较大的站,还是可以解除到不少好东西的。

Javascript 相关文章推荐
javascript中直接写php代码的方法
Jul 31 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
JS函数节流和函数防抖问题分析
Dec 18 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 Javascript
Mac下安装vue
Apr 11 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
关于node-bindings无法在Electron中使用的解决办法
Dec 18 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
浅谈Javascript变量作用域问题
Dec 16 #Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 #Javascript
javascript arguments使用示例
Dec 16 #Javascript
javascript实现日期格式转换
Dec 16 #Javascript
javascript实现禁止复制网页内容
Dec 16 #Javascript
node.js中的fs.rmdirSync方法使用说明
Dec 16 #Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 #Javascript
You might like
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
php中ob函数缓冲机制深入理解
2015/08/03 PHP
类似CSDN图片切换效果脚本
2009/09/17 Javascript
XENON基于JSON变种
2010/07/27 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
laydate时间日历插件使用方法详解
2018/11/14 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
python学习笔记:字典的使用示例详解
2014/06/13 Python
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
对python判断是否回文数的实例详解
2019/02/08 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
python生成器用法实例详解
2019/11/22 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
matplotlib自定义鼠标光标坐标格式的实现
2021/01/08 Python
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
高中考试作弊检讨书
2014/01/14 职场文书
迎新晚会策划方案
2014/06/13 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
欢迎新生标语2015
2015/07/16 职场文书
经典爱情感言
2015/08/03 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书