我正在尝试使用 eventListener 将与用户从下拉列表中选择的任何选项关联到我的 html 中每个 div 的 href 属性中。
我已经创建了所有这些链接并将它们存储为对象。我只能在调用特定键时才能访问它们。嵌套在主父对象中的每个对象都具有三个键和值 {keys:values}。
<!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 循环，但不知道该怎么做。
如果有错误，请纠正我，或者给我提供示例和解决方案。
干杯
最佳答案
将链接与选择值关联的最佳方法是使选择值与对象键相同。
<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>
选项值与plans对象中的键匹配，因此它们可以匹配。
关于javascript - 如何从嵌套对象访问数据，然后在用户从下拉列表中选择选项后传递到 href 属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57098755/