在页面中,我显示的价格根据用户选项而变化。
有 2 个下拉菜单,用户可以从每个下拉菜单中选择一个选项。
根据用户选择的 2 个值,显示正确的价格。
我应该像菜单一样创建 JS 下拉菜单还是使用表单的
select
?
如果使用
select
必须在表单内吗?或者应该在表格内?
我的想法是使用Javascript,这样当选择一个选项时,价格就会更新。
在这里您可以在 select 中提供 name 属性,其值与 form 标签相同。
function OnSubmit(ev) {
//prevents reload on clicking the submit button inside form
ev.preventDefault();
// Here we get the selected value from the select input
let cars1 = ev.target.cars1,
cars2 = ev.target.cars2;
// Here we print the selected value of two selects name : car1 and car2
console.log(
cars1.options[cars1.selectedIndex].value,
cars2.options[cars2.selectedIndex].value
);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form id="carform" onsubmit="OnSubmit(event)">
<button type="submit">submit</button>
</form>
<br />
<select id="cars1" name="carlist1" form="carform">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select id="cars2" name="carlist2" form="carform">
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
</select>
</body>
</html>