编程 Javascript

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>

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

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery弹窗插件colorbox绑定动态生成元素的方法

Jun 20 Javascript

js调试工具console.log()方法查看js代码的执行情况

Aug 08 Javascript

javascript常用的方法分享

Jul 01 Javascript

JavaScript中Function函数与Object对象的关系

Dec 17 Javascript

JavaScript中数组的22种方法必学(推荐)

Jul 20 Javascript

jquery利用json实现页面之间传值的实例解析

Dec 12 Javascript

Vue+webpack项目基础配置教程

Feb 12 Javascript

js 图片转base64的方式(两种)

Apr 24 Javascript

浅谈开发eslint规则

Oct 01 Javascript

微信小程序实现顶部下拉菜单栏

Nov 04 Javascript

vue-cli3 取消eslint校验代码的解决办法

Jan 16 Javascript

关于vue-cli3打包代码后白屏的解决方案

Sep 02 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