如何从嵌套对象访问数据，然后在用户从下拉列表中选择选项后传递给href属性
如何从嵌套对象访问数据，然后在用户从下拉列表中选择选项后传递给href属性
提问于 2019-07-18 16:11:33
我试图通过使用eventListener，将用户从下拉列表中选择的任何选项关联到href属性中的href属性中。
我已经创建了所有这些链接，并将它们存储为对象。只有当我调用特定的密钥时，我才能访问它们。嵌套在主父对象中的每个对象都有三个键和值{key:value}。
<!DOCTYPE html>
<html>
<head>
<style>
.form {
width: 25%;
height: inherit;
overflow: auto;
float: left;
}
</style>
</head>
<body>
<form class="form" action="result.html" method="POST">
<h1 class="productName">Div 1</h1>
<img src="img\red.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
<select name="category" class="package">
<option value="Selected an option" default>Select an option</option>
<option value="Business Plan">Business Plan</option>
<option value="Feasibility Report">Feasibility Report</option>
</select>
<a href="" class="submit"><button type="submit" >Try it</button></a>
</form>
<form class="form" action="result.html" method="POST">
<h1 class="productName">Div 2</h1>
<img src="img\yellow.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
<select name="category" class="package">
<option value="Selected an option" default>Select an option</option>
<option value="Business Plan">Business Plan</option>
<option value="Feasibility Report">Feasibility Report</option>
</select>
<a href="" class="submit"><button type="submit" >Try it</button></a>
</form>
<form class="form" action="result.html" method="POST">
<h1 class="productName">Div 3</h1>
<img src="img\blue.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
<select name="category" class="package">
<option value="Selected an option" default>Select an option</option>
<option value="Business Plan">Business Plan</option>
<option value="Feasibility Report">Feasibility Report</option>
</select>
<a href="" class="submit"><button type="submit" >Try it</button></a>
</form>
<form class="form" action="result.html" method="POST">
<h1 class="productName">Div 4</h1>
<img src="img\black.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
<select name="category" class="package">
<option value="Selected an option" default>Select an option</option>
<option value="Business Plan">Business Plan</option>
<option value="Feasibility Report">Feasibility Report</option>
</select>
<a href="" class="submit"><button type="submit" >Try it</button></a>
</form>
</body>
<script src="index.js"></script>
</html>
let testArrays = {
'product101' :{
'businessPlan': 'http://localhost/projects/link1a',
'feasibilityReport': 'http://localhost/projects/link1b',
'bizPlanReport': 'http://localhost/projects/link1c'
},
'product102' : {
'businessPlan': 'http://localhost/projects/link2a',
'feasibilityReport': 'http://localhost/projects/link2b',
'bizPlanReport': 'http://localhost/projects/link2c'
},
'product103' : {
'businessPlan': 'http://localhost/projects/link3a',
'feasibilityReport': 'http://localhost/projects/link3b',
'bizPlanReport': 'http://localhost/projects/link3c'
},
'product104' :{
'businessPlan': 'http://localhost/projects/link4a',
'feasibilityReport': 'http://localhost/projects/link4b',
'bizPlanReport': 'http://localhost/projects/link4c'
}
};
const forms = document.querySelectorAll(".form");
for (const form of forms) {
form.addEventListener('submit', function (event) {
event.preventDefault();
let package = this.querySelector('.package').value;
if(package == 'Business Plan'){
let link = this.querySelector('.submit').href = testArrays.product101.businessPlan;
let message = this.querySelector('.submit').innerText = 'Try ' + package;
}
else if(package == 'Feasibility Report'){
let link = this.querySelector('.submit').href = testArrays.product102.feasibilityReport;
let message = this.querySelector('.submit').innerText = 'Try ' + package;
}
else {
alert('You must select an option');
};
});
}我的期望是将每个数组分配给一个div。我正在考虑如何使用for循环，但不知道该做什么。
如果我错了，请纠正我，或者给我举例子和解决办法。
干杯
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-07-18 16:32:49
将链接与select值关联的最佳方法是使select值与对象键相同。
<form id="form">
<select name="select" id="mySelect">
<option default value="choice1">Choice One</option>
<option value="choice2">Choice Two</option>
</select>
<button type="submit">Submit</button>
</form>
<script>
let plans = {
choice1: "https://mylink.com",
choice2: "https://myotherlink.com"
}
let select = document.querySelector("#mySelect")
let form = document.querySelector("#form")
form.addEventListener("submit", event => {
event.preventDefault()
alert(plans[select.value])
})
</script>
选项value与plans对象中的键匹配，因此可以匹配它们。
下面是一个活生生的例子：https://codesandbox.io/s/static-ncgzp
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57098755
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号