Javascript多个下拉框
Javascript multiple drop down box
本文关键字:Javascript 更新时间:2023-09-26
有没有一种方法可以从数组列表中获得多个下拉字段,而不必将信息硬编码到HTML中?这样,通过选择每个类别,相关的子类别就会下降。列表如下所示:
var listData = [
{
"title": "Meeting Room",
"category": "Forms",
"url": "https://www.google.co.uk/"
},
{
"title": "Book a Car",
"category": "Forms",
"url": "https://www.google.co.uk/"
},
{
"title": "Stationery",
"category": "Forms",
"url": "https://www.google.co.uk/"
},
{
"title": "Hospitality",
"category": "Forms",
"url": "https://www.google.co.uk/"
},
{
"title": "Communications",
"category": "News",
"url": "https://blogs.office.com/"
},
{
"title": "Industries",
"category": "News",
"url": "https://blogs.office.com/"
},
{
"title": "Policy",
"category": "News",
"url": "https://blogs.office.com/"
},
{
"title": "Get started",
"category": "Information",
"url": "https://support.office.com/"
},
{
"title": "What do you need",
"category": "Useful Information",
"url": "https://support.office.com/"
},
{
"title": "Accessibility features",
"category": "Useful Information",
"url": "https://support.office.com/"
},
{
"title": "Videos",
"category": "Useful Information",
"url": "https://support.office.com/"
}
]
下面的代码完成了这项工作。这是香草JS。
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Form</title>
</head>
<body>
<select id="categories" onchange="changeCategory(event)"> </select>
<select id="title"> </select>
<select id="url"> </select>
<script>
var listData = [{
"title": "Meeting Room"
, "category": "Forms"
, "url": "https://www.google.co.uk/"
}, {
"title": "Book a Car"
, "category": "Forms"
, "url": "https://www.google.co.uk/"
}, {
"title": "Stationery"
, "category": "Forms"
, "url": "https://www.google.co.uk/"
}, {
"title": "Hospitality"
, "category": "Forms"
, "url": "https://www.google.co.uk/"
}, {
"title": "Communications"
, "category": "News"
, "url": "https://blogs.office.com/"
}, {
"title": "Industries"
, "category": "News"
, "url": "https://blogs.office.com/"
}, {
"title": "Policy"
, "category": "News"
, "url": "https://blogs.office.com/"
}, {
"title": "Get started"
, "category": "Information"
, "url": "https://support.office.com/"
}, {
"title": "What do you need"
, "category": "Useful Information"
, "url": "https://support.office.com/"
}, {
"title": "Accessibility features"
, "category": "Useful Information"
, "url": "https://support.office.com/"
}, {
"title": "Videos"
, "category": "Useful Information"
, "url": "https://support.office.com/"
}];
function removeOptions(selectbox) {
var i;
for (i = selectbox.options.length - 1; i >= 0; i--) {
selectbox.remove(i);
}
}
function changeCategory(event) {
removeOptions(document.getElementById('title'))
removeOptions(document.getElementById('url'))
mySelect1 = document.getElementById('title')
mySelect2 = document.getElementById('url');
listData.forEach(function (item, index) {
if (item.category == event.target.value) {
mySelect1.options[mySelect1.options.length] = new Option(item.title, item.title);
mySelect2.options[mySelect2.options.length] = new Option(item.url, item.url);
}
});
}
Array.prototype.contains = function (obj) {
var i = this.length;
while (i--) {
if (this[i] == obj) {
return true;
}
}
return false;
}
var mySelect = document.getElementById('categories');
var categories = new Array;
listData.forEach(function (item, index) {
if (!categories.contains(item.category)) {
mySelect.options[mySelect.options.length] = new Option(item.category, item.category);
categories.push(item.category);
}
});
</script>
</body>
</html>
相关文章:
- 为什么不't Javascript对我的输入值进行了一些重新检查
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 将函数的上下文应用于javascript变量
- 使用php或javascript从facebook相册URL中删除多余的部分
- 正在添加'X'按钮,在文本字段旁边使用javascript
- 如何在JavaScript中将字符串转换为函数引用
- 模糊事件的Javascript测试
- Javascript更改图标
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 如何使用WCF服务和javascript表单post上传.doc文件
- javascript结合了数组和字典
- 这是什么 ==- javascript 运算符
- 从javascript创建一个列表
- 无法在通过jQuery的ajax加载的页面中执行javascript
- Javascript:selenium Web驱动程序isDisplayed()不工作
- 如何通过ajax刷新JSF填充的javascript变量
- 如何在Javascript中将JSon对象转换为数组
- Javascript生成的表单未提交
- 使用javascript将动态表从一个html页面打印到另一个html页
- 通过javascript重定向html传递php变量