当前位置: 代码迷 >> Web前端 >> 点击单选按钮隐藏上拉选项
  详细解决方案

点击单选按钮隐藏上拉选项

热度:245   发布时间:2012-11-05 09:35:11.0
点击单选按钮隐藏下拉选项

<%@ page language="java" pageEncoding="UTF-8"%>
<%
?String path = request.getContextPath();
?String basePath = request.getScheme() + "://"
???+ request.getServerName() + ":" + request.getServerPort()
???+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
?<head>
??<base href="<%=basePath%>">
??<title>酷猫教育网</title>
??<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
??<meta http-equiv="expires" content="-1" />
??<meta name="keywords" content="视频教育,网络教学,暑期补课,名师补习班" />
??<meta name="description" content="暑期补习,学习方法,数理化补课哪里最好?酷猫教育网最好!,远程教学" />
??<meta name="author" content="edu.kum.kum.net.cn, 酷猫教育" />
??<meta name="copyright" content="www.kum.net.cn,酷猫信息" />
??<script>
function $(id){
return document.getElementById(id);
}
function add(s,t){
$("soojs.com").value=parseInt(s)+t;
}
</script>
??<style type="text/css">
body {
?font: 12px Tahoma;
?text-align: center;
?background: #0000rr;
}

.table1 {
?font-size: 12px;
?color: #000000;
}

.input {
?width: 60px;
?height: 20px;
?background-color: #D0DFFF;
?font-size: 15px;
?color: #666699
}

.zhuce_con01 {
?font-size: 14px;
?line-height: 25px;
?margin-top: 5px;
?color: #666666;
}

.btn {
?BORDER-RIGHT: #7b9ebd 1px solid;
?PADDING-RIGHT: 2px;
?BORDER-TOP: #7b9ebd 1px solid;
?PADDING-LEFT: 2px;
?FONT-SIZE: 12px;
?FILTER: progid :DXImageTransform.Microsoft .Gradient(GradientType =0,StartColorStr =#ffffff, EndColorStr= #cecfde);
?BORDER-LEFT: #7b9ebd 1px solid;
?CURSOR: hand;
?COLOR: black;
?PADDING-TOP: 2px;
?BORDER-BOTTOM: #7b9ebd 1px solid
}
</style>
??<script type="text/javascript">
function validate()
{
var resualt=false;
for(var i=0;i<document.form1.r.length;i++)
{
??? if(document.form1.r[i].checked)
??? {
????????? resualt=true;
??? }
}
if(!resualt)
{
??? alert("请选择一个用户类型!");
??? return resualt;
}
/**
var choose=form1.r[i].value);
?var xue = document.form1.r.value;
if(xue!=0){
? document.write("用户类型"+xue);
? return false;
? if(document.form1.r[i].value==1){
document.form1.UserClass.style.display="none";
return false;
}
}
*/
if(document.form1.UserName.value.length==0)
{
document.getElementById("username1").innerHTML="<font color='red'>×用户名不能为空</font>";
document.form1.UserName.focus();
return false;
}
else{
document.getElementById("username1").innerHTML="<font color='blue'>√用户名正确</font>";
}
if(document.form1.UserTel.value.length==0){
document.getElementById("usertel1").innerHTML="<font color='red'>×电话号码和手机号码至少选填一个阿</font>";
document.form1.UserTel.focus();
return false;
}
else{
document.getElementById("usertel1").innerHTML="<font color='blue'>√格式正确</font>";
}
if(document.form1.UserTel.value!= ""){???
var phone=document.form1.UserTel.value;???
var p1=/(^[0-9]{3,4}\-[0-9]{7,8}$)|(^[0-9]{7,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/;???
var me = false;???
if (p1.test(phone))me=true;???
if (!me){???
document.form1.UserTel.value='';???
document.getElementById("usertel1").innerHTML="<font color='red'>×您输入的电话号码有错误。区号和电话号码之间请用-分割</font>";???
document.form1.UserTel.focus();
return false;???
}?
else{
? document.getElementById("usertel1").innerHTML="<font color='blue'>√您输入的格式正确</font>";?
? }
}
if (document.form1.UserEmail.value.indexOf('.')==-1 || document.form1.UserEmail.value.indexOf('@')==-1){
document.getElementById("useremail1").innerHTML="<font color='red'><font color='red'>×邮箱必须包含.和@</font>";
document.form1.UserEmail.focus();
return false;
}
else{
document.getElementById("useremail1").innerHTML="<font color='blue'><font color='blue'>√邮箱格式正确</font>";
}
if(document.form1.answer.value.length==0){
document.getElementById("answer1").innerHTML="<font color='red'>×问题答案不能为空,请正确填写信息!</font>";
document.form1.answer.focus();
return false;
}
else{
document.getElementById("answer1").innerHTML="<font color='blue'><font color='blue'>√好的!请保管好,方便找回账号</font>";
}
return true;
}
</script>
?</head>
?<body>
??<h3 id="pgtitle">
???kum视频教学账号申请
??</h3>
??<p id="pgtitletext">
???要求填写所有信息。带*号的必填
??</p>

??<div class="bluebar">
???&nbsp;
??</div>
??<font size="2" color="blue" style="margin-left: 1300px;">填写基本信息&nbsp;&nbsp;|&nbsp;&nbsp;kum教学软件</font>
??<hr>
??<form action="UserLoginServlet" name="form1" method="post"
???onsubmit="return(validate())">
???<table width="50%" border="0" class="table1" align="center"
????style="margin-top: 80px;" bgcolor="">
????<tr>
?????<td width="25%" height="22" align="right">
??????用户选择:
??????<br>
?????</td>
?????<!-- style="display:none" 设置下拉单选按钮的隐藏 -->
?????<td height="22" colspan="2" align="left">
??????<input type="radio" name="r" value="1" id="cc"
????????? onclick="qq.style.display='none'">
??????一般用户
??????<input type="radio" name="r" value="0" id="cc"
???????onclick="qq.style.display='block'">
??????学生
?????</td>
????</tr>
????<tr>
?????<td width="25%" height="22" align="right">
??????用户姓名:
??????<br>
?????</td>
?????<td height="22" colspan="2" align="left">
??????<input name="UserName" id="UserName" type="text" class="form"
???????size="32" />
??????*
??????<span id="username1">(请填写正确的用户名)</span>
?????</td>
????</tr>
????<tr>
?????<td width="25%" height="22" align="right">
??????电话号码:
??????<br>
?????</td>
?????<td height="22" colspan="2" align="left">
??????<input name="UserTel" id="UserTel" type="text" class="form"
???????size="32" />
??????*
??????<span id="usertel1">(请填写正确的号码,可以固定电话也可以是手机号码)</span>
?????</td>
????</tr>
????<tr>
?????<td width="25%" height="22" align="right">
??????用户邮箱:
?????</td>
?????<td height="22" colspan="2" align="left">
??????<input name="UserEmail" id="UserEmail" type="text" class="form"
???????size="32" />
??????*
??????<span id="useremail1">(请填写真实的E-mail地址(如:123@sina.com),方便找回密码)</span>
?????</td>
????</tr>
????</table>
????<div id="qq">
????<table width="50%" border="0" class="table1" align="center">
????
????<tr>
?????<td width="25%" height="22" align="right" id="car5">
??????学生年级:
?????</td>
?????<td height="22" colspan="2" align="left">
??????<select name="UserClass" class="form">
???????<option value="一年级">
????????一年级
???????</option>
???????<option>
????????二年级
???????</option>
???????<option>
????????三年级
???????</option>
???????<option>
????????四年级
???????</option>
???????<option>
????????五年级
???????</option>
???????<option>
????????六年级
???????</option>
???????<option>
????????初一年级
???????</option>
???????<option>
????????初二年级
???????</option>
???????<option>
????????初三年级
???????</option>
???????<option>
????????高一年级
???????</option>
???????<option>
????????高二年级
???????</option>
???????<option>
????????高三年级
???????</option>
??????</select>
?????</td>
????</tr>
????</table>
???</div>
???<table width="50%" border="0" class="table1" align="center" style="margin-left: 200px;">
????<tr>
?????<td height="22" align="right">
??????验证码:
?????</td>
?????<td height="22" colspan="2" align="left">
??????<input name="chknumber" id="chknumber" type="text" class="type1"
???????style="color: #808080; ime-mode: disabled;" size="32"
???????maxlength="32" value="输入字符,不区分大小写"
???????onfocus="if(value=='输入字符,不区分大小写'){value=''}" />
??????<img src="CheckCodeServlet" width="80" id="code"
???????onclick="javascript:document.getElementById('code').src='CheckCodeServlet';return false;"
???????class="input" />
?????</td>
????</tr>
????<tr>
?????<td height="22" align="right">
??????回答问题:
?????</td>
?????<td height="22" colspan="2" align="left">
??????<select name="ask" class="form" id="ask">
???????<option value=您父亲或者母亲的姓名>
????????您父亲或者母亲的姓名
???????</option>
???????<option>
????????你的出生地
???????</option>
???????<option>
????????你童年最好的朋友
???????</option>
??????</select>
??????<span id="ask1"></span>

?????</td>
????</tr>
????<tr>
?????<td height="22" align="right">
??????问题答案:
?????</td>
?????<td>
??????<input name="answer" id="answer" type="text" class="form"
???????size="32" />
??????*
??????<span id="answer1">(填写正确的信息)</span>
?????</td>
????</tr>
????<tr>
?????<td height="22" align="right">

?????</td>
?????<td>
??????<input type="submit" class=btn title="同意" value="同意" id="tijiao" />
??????&nbsp;&nbsp;&nbsp;
??????<input type="reset" class=btn title="重置">
??????&nbsp;&nbsp;&nbsp;
??????<input type="button" class=btn title="找回密码" value="找回帐号"
???????onClick="window.location.reload('find.jsp');">
??????<P></p>

?????</td>
????</tr>
???</table>
??</form>
??<div style="margin-top: 200px;" align="center">
???<hr>
???<span><font size="2"><strong>Copyright &copy;
??????1998-2010 Tencent Inc. All Rights Reserved</strong></font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font size="2">酷猫公司,版权所有</font> </span>
????
??</div>
?</body>
</html>

  相关解决方案