用javascript实现下拉菜单互动

最新推荐文章于 2021-05-11 22:22:10 发布

iteye_9891

最新推荐文章于 2021-05-11 22:22:10 发布

阅读量193

点赞数

分类专栏： JavaScript 文章标签： JavaScript HTML ViewUI

JavaScript 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的下拉菜单联动选择框示例。通过监听一级菜单变化来动态更新二级菜单选项，同时提供了输入校验功能确保用户正确填写服务类型及二级服务类型。

js 代码

<html>
<head><title>test select changed</title></head>
<script language='javascript'>
// 更新二级服务类型
function updateSubServer() {
var arrays = [['100', 'aa', '101'],['100', 'bb','102'],['200', 'cc', '201'], ['200', 'dd', '202']];
clear_sub_server();
var sub_servers2 = document.getElementById("sub_server");
var option_1 = null;
for (var i = 0; i < arrays.length; i++) {
option_1 = document.createElement("option");
if (document.forms[0].server.options[document.forms[0].server.selectedIndex].value == arrays[i][0]) {
option_1.text = arrays[i][1];
option_1.value = arrays[i][2];
sub_servers2.add(option_1);
}
}
}
// 清除二级服务类型，只留一个空的选择项
function clear_sub_server() {
var sub_servers = document.getElementById("sub_server");
while(sub_servers.childNodes.length > 0) {
sub_servers.removeChild(sub_servers.childNodes[0]);
}
var option_2 = document.createElement("option");
option_2.text = "请选择二级服务类型";
option_2.value = "";
sub_servers.add(option_2);
}
// 输入校验
function checkInput() {
if (document.forms[0].server.value == '') {
alert('请输入服务类型!');
return false;
}
if (document.forms[0].sub_server.value == '') {
alert('请输入二级服务类型!');
return false;
}
document.forms[0].submit();
}
</script>
<body>
<form name='form1' action='#' method='get' onsubmit="checkInput();return false;">
服务类型：<select name='server' id='server' onchange='updateSubServer();'>
<option value=''>请选择服务类型</option>
<option value='100'>第一个服务</option>
<option value='200'>第二个服务</option>
</select>
二级服务类型：<select name='sub_server' id='sub_server'>
<option value=''>请选择二级服务类型</option>
</select>
<input type='submit' />
</form>
</body>
</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。