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中的delete使用详解
Apr 11 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
js实现的类似于asp数据字典的数据类型代码实例
Sep 03 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 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
PHP 引用文件技巧
2010/03/02 PHP
PHP迭代器的内部执行过程详解
2013/11/12 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
python类和继承用法实例
2015/07/07 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
简单了解python协程的相关知识
2019/08/31 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
Java基础面试题
2014/07/19 面试题
药学专业大学生自荐信
2013/09/28 职场文书
自我评价格式
2014/01/06 职场文书
大型晚会策划方案
2014/02/06 职场文书
合作意向书范本
2014/03/31 职场文书
热门专业求职信
2014/05/24 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
暑假安全保证书
2015/02/28 职场文书
观看建国大业观后感
2015/06/01 职场文书
催款函范本大全
2015/06/24 职场文书
离职告别感言
2015/08/04 职场文书