js下拉菜单选中刷新页面效果

Posted 2023-05-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js下拉菜单选中刷新页面效果相关的知识，希望对你有一定的参考价值。

有一个页面 a.jsp，里面有个下拉列表
<select>
<option value="1">一</option>
<option value="2">二</option>
</select>
当我选择下拉列表时，会刷新本页面到a.jsp?id=1 或者 a.jsp?id=2求效果

第1章运行设计
1.1运行模块组合
Eclipse、mysql
1.2运行控制
第2章程序设计说明
2.1管理员登录设计说明
管理员登录模块设计
2.1.1程序描述

2.1.2输入项
编号

参数名称

数据类型

有效范围

默认值

输入方式

备注

admin_name

登录用户

varchar(50)

不超过50字符

Null

传参

admin_pwd

登录密码

Varchar（8）

8个字符，支持特殊字符与下划线

88888888

传参

验证码

Varchar（4）

4个字符，仅由数字和字母组成。

传参

2.1.3输出项
编号

参数名称

数据类型

有效范围

输出形式

备注

emp_id

员工工号

Integer

00001-99999

参数返回

stu_name

员工姓名

Varchar（50）

不超过50字符

参数返回

stu_gender

员工性别

Varchar(10)

男或女

参数返回

stu_age

员工年龄

Integer

18-60

参数返回

stu_tel

联系方式

Varchar(50)

11位纯数字

参数返回

post_name

职位名称

Varchar(50)

不超过50字符

参数返回

Class_name

班级名称

Varchar(50)

不超过50字符

参数返回

2.1.4流程逻辑

2.1.5错误处理
登录失败
2.2添加学员设计说明
添加学员模块设计
2.2.1程序描述

图表8添加学员时序图

2.2.2输入项

表格5添加学员输入表
编号

参数名称

数据类型

有效范围

默认值

输入方式

备注

emp_id

员工工号

Integer

00001-99999

00001

传参

stu_name

员工姓名

Varchar（50）

不超过50字符

佚名

传参

stu_gender

员工性别

Varchar（10）

男或女

男

传参

stu_age

员工年龄

Integer

18-60

18

传参

stu_tel

联系方式

Varchar(50)

11位纯数字

null

传参

post_name

职位名称

Varchar(50)

不超过50字符

Null

传参

Class_name

班级名称

Varchar(50)

不超过50字符

null

传参

stu_pwd

默认密码

Varchar（8）

8个字符，支持特殊字符与下划线

88888888

传参

2.2.3输出项
添加成功
添加失败
2.2.4流程逻辑
图表9添加学员流程图

2.3查询学员设计说明
查询学员信息模块设计
2.3.1程序描述
图表10查询学员

2.3.2输入项

表格6查询学员输入表
编号

参数名称

数据类型

有效范围

默认值

输入方式

备注

stu_name

员工姓名

Varchar（50）

不超过50个字符

Null

传参

2.3.3输出项

表格7查询学员输出表
编号

参数名称

数据类型

有效范围

输出形式

备注

emp_id

员工工号

Integer

00001-99999

参数返回

stu_name

学员姓名

Varchar（50）

不超过50字符

参数返回

stu_gender

学员性别

Varchar（10）

男或女

参数返回

stu_age

学员年龄

Integer

18-60

参数返回

stu_tel

联系方式

Varchar(50)

11位纯数字

参数返回

post_name

职位

Varchar(50)

不超过50字符

参数返回

Class_name

所在班级

Varchar(50)

不超过50字符

2.3.4流程逻辑
图表11查询学员流程图

2.4修改学员设计说明
修改学员信息模块设计
2.4.1程序描述
图表12修改学员

2.4.2输入项

表格8修改学员输入表
编号

参数名称

数据类型

有效范围

默认值

输入方式

备注

stu_id

员工工号

Integer

00000-99999

00000

传参

stu_name

员工姓名

Varchar（50）

不超过50个字符

Null

传参

2.4.3输出项

表格9修改学员输出表
编号

参数名称

数据类型

有效范围

输出形式

备注

emp_id

员工工号

Integer

00001-99999

参数返回

stu_name

学员姓名

Varchar（50）

不超过50字符

参数返回

stu_gender

学员性别

Varchar（10）

男或女

参数返回

stu_age

学员年龄

Integer

18-60

参数返回

stu_tel

联系方式

Varchar(50)

11位纯数字

参数返回

post_name

职位

Varchar(50)

不超过50字符

参数返回

Class_name

所在班级

Varchar(50)

不超过50字符

参数返回

2.4.4流程逻辑
图表13修改学员流程图

2.5删除学员设计说明
删除学员信息模块设计
2.5.1程序描述

图表14删除学员

2.5.2输入项

表格10删除学员输入表
编号

参数名称

数据类型

有效范围

默认值

输入方式

备注

stu_id

员工工号

Integer

00000-99999

00000

传参

stu_name

员工姓名

Varchar（50）

不超过50个字符

佚名

传参

2.5.3流程逻辑
图表15删除学员流程图

2.6查看指定时间缺席的学员设计说明
查看缺席学员的模块设计
2.6.1程序描述
图表16查看缺席学员

2.6.2输入项

表格11缺席学员输入表
编号

参数名称

数据类型

有效范围

默认值

输入方式

备注

train_begin

开始时间

Date

2000-01-01之后

Null

传参

train_end

结束时间

Date

开始时间之后

Null

传参

2.6.3输出项

表格12缺席学员输出表
编号

参数名称

数据类型

有效范围

输出形式

备注

emp_id

员工工号

Integer

00001-99999

参数返回

stu_name

学员姓名

Varchar（50）

不超过50字符

参数返回

Class_name

所在班级

Varchar(50)

不超过50字符

参数返回参考技术A <select>
<option value="1" onChange='location.assign("a.jsp?id=1")'>一</option>
<option value="2" onChange='location.assign("a.jsp?id=1")'>二</option>
</select> 参考技术B <select onchange="location.href='a.jsp?id='+this.value;">
<option value="1">一</option>
<option value="2">二</option>
</select>本回答被提问者采纳

鼠标事件和表单事件+好友列表选中效果+侧面菜单下拉效果

通用：
onclick 鼠标单击
ondblclick 鼠标双击
onmouseover 鼠标放上
onmouseout 鼠标离开
onmousemove 鼠标移动

表单：
onchang 表单的值改变
onblur 失去焦点
onfocus 获得焦点
onselect 选中

2.好友列表选中效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px auto; padding:0px; font-family:微软雅黑; font-size:16px;}

.f{ width:200px; height:30px; background-color:#63C; color:white; text-align:center; line-height:30px; vertical-align:middle; margin-top:3px}
.f:hover{ cursor:pointer;}

</style>

</head>

<body>

</div>

</body>
<script type="text/javascript">

function Xuan(a)
{
var attr = document.getElementsByClassName("f");

for(var i=0;i<attr.length;i++)
{
attr[i].style.backgroundColor = "#63C";
attr[i].setAttribute("xz","0");
}
a.setAttribute("xz","1");
a.style.backgroundColor = "#F63";
}

function Bian(a)
{
var attr = document.getElementsByClassName("f");

for(var i=0;i<attr.length;i++)
{
if(attr[i].getAttribute("xz")=="0")
{
attr[i].style.backgroundColor = "#63C";
}
}

a.style.backgroundColor = "#F63";
}

function Hui(a)
{
var attr = document.getElementsByClassName("f");

for(var i=0;i<attr.length;i++)
{
if(attr[i].getAttribute("xz")=="0")
{
attr[i].style.backgroundColor = "#63C";
}
}
}

</script>
</html>

2.左侧下拉列表

</head>
<body>
<div style="width:200px; height:600px; margin-top:30px">
<div class="zhu" onclick="Show(\'z1\')">
首页
</div>
<div class="zi" id="z1">
<div class="list">你好</div>
<div class="list">首页</div>
</div>
<div class="zhu" onclick="Show(\'z2\')">
教务信息
</div>
<div class="zi" id="z2">
<div class="list">你好</div>
<div class="list">首页</div>
</div>
<div class="zhu" onclick="Show(\'z3\')">
下载专区
</div>
<div class="zi" id="z3">
<div class="list">你好</div>
<div class="list">首页</div>
</div>
<div class="zhu" onclick="Show(\'z4\')">
学员信息管理
</div>
<div class="zi" id="z4">
<div class="list">你好</div>
<div class="list">首页</div>
</div>
</div>
</body>
<script type="text/javascript">

function Show(id)
{

var z = document.getElementById(id);

if(z.style.display=="block")
{
z.style.display = "none";
}
else
{
z.style.display = "block";
}
}

</script>
</html>

以上是关于js下拉菜单选中刷新页面效果的主要内容，如果未能解决你的问题，请参考以下文章

Js效果：图片轮播；选项卡；侧面菜单下拉效果;进度条效果；滑动效果；好友列表选中效果；点击选中显示效果

js 下拉框获取焦点后，自动展开选项内容？

JS练习题（下拉菜单；好友选中输入）

在刷新页面之前，下拉菜单和模式在 Vue 组件中不起作用

当我使用 sumoselect.js 插件时下拉菜单不刷新

HTML里用iframe引入一个头部页面JS下拉菜单显示不全