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 相关文章推荐
载入进度条 效果
Jul 08 Javascript
IE8 兼容性问题(属性名区分大小写)
Jun 04 Javascript
jquery DOM操作 基于命令改变页面
May 06 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
JS字符串处理实例代码
Aug 05 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
js实现网页抽奖实例
Aug 05 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
vue单个组件实现无限层级多选菜单功能
Apr 10 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 无限级缓存的类的扩展
2009/03/16 PHP
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
php 归并排序 数组交集
2011/05/10 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
超级退弹代码
2008/07/07 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
Vue.js中使用Vuex实现组件数据共享案例
2020/07/31 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
python开发中range()函数用法实例分析
2015/11/12 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
一套.net面试题及答案
2016/11/02 面试题
就业自荐书
2013/12/05 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
个人四风问题整改措施
2014/10/24 职场文书
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电
Java字符串逆序方法详情
2022/03/21 Java/Android
vue+iview实现手机号分段输入框
2022/03/25 Vue.js