JavaScript 实现两级下拉框联动

最新推荐文章于 2024-07-22 08:55:10 发布

dd1234562014

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量345

点赞数

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/lixiaoxuan/articles/9431227.html

版权

<!DOCTYPE html>
<!--<%@page import="com.sogou.cm.common.env.EnvUtil"%>-->
<!--<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>-->

<!--<%-->
<!--boolean isDebug = EnvUtil.loginDebug;-->
<!--%>-->
<html>
<head>
<meta charset="utf-8" />
<style>
*{
padding: 0px;
margin: 0px;
}
.container{
padding-top: 30px;
padding-left: 20px;
}
:focus {
outline: 0
}
select{
height: 35px;
width: 300px;
border: 1px solid #ddd;
font-size: 14px;
color: #666;
}
#type{
margin-left: 15px;
}
.usertype ,.userlist{
margin-top: 10px;
}
.login_but{
display: block;
cursor: pointer;
width: 50px;
height: 30px;
margin-top: 10px;
margin-left: 170px; ;
}
.comment{
margin-top: 10px;
font-size: 10px;
color: red;
}
</style>
<script type="text/javascript">
function getType(){
// 用户类型定义
var ka_salers="<option value=\"maxiaoyan@sogou-inc.com\">渠道马妍maxiaoyan@sogou-inc.com</option><option value=\"menglong@sogou-inc.com\">直客领导孟龙menglong@sogou-inc.com</option>"
var ka_meijies="<option value=\"wanglinlin@sogou-inc.com\">媒介经理王琳琳wanglinlin@sogou-inc.com</option><option value=\"zhaoyan212796@sogou-inc.com\">媒介赵焱zhaoyan212796@sogou-inc.com</option><option value=\"baiyun@sogou-inc.com\">媒介白鋆baiyun@sogou-inc.com</option><option value=\"zengmin@sogou-inc.com\">媒介曾敏zengmin@sogou-inc.com</option>"
var zx_users="<option value=\"malin@sogou-inc.com\">马蔺大区经理malin@sogou-inc.com</option><option value=\"chenxichao@sogou-inc.com\">陈西超中小渠道chenxichao@sogou-inc.com</option><option value=\"yutaoli@sogou-inc.com\">李玉涛中小渠道yutaoli@sogou-inc.com</option>"
var kefus="<option value=\"fengchenchen@sogou-inc.com\">中小客服fengchenchen@sogou-inc.com</option><option value=\"yanying212582@sogou-inc.com\">ka客服阎莹yanying212582@sogou-inc.com</option>"
var leader_users="<option value=\"yuxiao@sogou-inc.com\">CM产品yuxiao@sogou-inc.com</option><option value=\"laurazhou@sogou-inc.com\">客服领导周国钢laurazhou@sogou-inc.com</option>"
var test_users="<option value=\"lixiaoxuan@sogou-inc.com\">李晓玄lixiaoxuan@sogou-inc.com</option>"
//获取用户类型标签的value值
var typename=document.getElementById('type').value
//获取用户下拉框标签
var user=document.getElementById('user')
//不同的用户类型，对应不同的用户列表
switch (typename){
case"ka_saler":user.innerHTML=ka_salers;
break;
case"ka_meijie":user.innerHTML=ka_meijies;
break;
case"kefu":user.innerHTML=kefus;
break;
case "zx":user.innerHTML=zx_users;
break;
case "leader":user.innerHTML=leader_users;
break;
case 'test':user.innerHTML=test_users;
break;
}
}
function DispLink(Id)
{
strResult ="jpassport-sp-shire.jsp?user=" + Id;
document.getElementById("hdiv").innerHTML = "<a href='"+strResult+"' >登陆</a>";
}

function login(){
DispLink(document.getElementById("user").value);
}
</script>
</head>
<body>
<div class="container">
<div class="comment"><span>备注：请先选择类型，再选择用户</span></div>
<div class="usertype">
<span>用户类型：</span>
<select id="type" οnchange="getType()">
<option value="default">请选择类型</option>
<option value="ka_saler">KA直客&渠道销售</option>
<option value="ka_meijie">KA媒介</option>
<option value="kefu">中小&KA客服</option>
<option value="zx">中小渠道&大区经理</option>
<option value="leader">产品&业务领导</option>
<option value="test">技术同学</option>
</select>
</div>
<div class="userlist">
<span>用户登录名：</span>
<select id="user" >
<option value="default">请选择用户</option>
</select>
</div>

<div class="login">
<input class='login_but' type="button" value="登陆" οnclick="login()"/>
<div id="hdiv"></div>
</div>

</div>

</body>
</html>

转载于:https://www.cnblogs.com/lixiaoxuan/articles/9431227.html

dd1234562014

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 实现两级下拉框联动

<!DOCTYPE html><!--<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %&gt...
复制链接

扫一扫