使用级联下拉菜单为可变值赋值

Question

我对此还很陌生，而且我已经没有什么想法来实现这一点了。

情况如下；对于计算器工具，我需要创建一个级联下拉菜单，其中选择的第二个选项与一个值相对应，然后该值应用作公式中的变量。我目前的问题是，我不知道如何为每个选项分配一个值。我想我可以弄清楚其余的代码，但我已经在这上面呆了一段时间了。

这是我目前为止使用的级联下拉菜单。我更改了选项，只是为了确保它与我正在进行的项目无关。为了清楚起见，我们假设我需要将汽车的价值分配给相应的选项，并用它来计算税款，这将是汽车价值的一定百分比。

<script>
function dynamicdropdown(listindex)
{
document.getElementById("Model").length = 0;
switch (listindex)
{
case "Mazda" :
document.getElementById("model").options[0]=new Option("Select Model","");
document.getElementById("model").options[1]=new Option("MX-5","MX-5");
document.getElementById("model").options[2]=new Option("RX-7","RX-7");
document.getElementById("model").options[3]=new Option("323","323");
document.getElementById("model").options[4]=new Option("626","626");
document.getElementById("model").options[5]=new Option("MX-6","MX-6");
break;
case "Subaru" :
document.getElementById("model").options[0]=new Option("Please select model","");
document.getElementById("model").options[1]=new Option("Impreza","Impreza");
document.getElementById("model").options[2]=new Option("Forester","Forester");
break;
case "Nissan" :
document.getElementById("model").options[0]=new Option("Please select model","");
document.getElementById("model").options[1]=new Option("350Z","350Z");
document.getElementById("model").options[2]=new Option("370Z","370Z");
document.getElementById("model").options[3]=new Option("Pulsar","Pulsar");
document.getElementById("model").options[4]=new Option("GT-R","GT-R");
document.getElementById("model").options[5]=new Option("Skyline","Skyline");
}
return true;
}
</script>
<div class="category_div" id="category_div">Select manufacturer:
<select name="category" class="required-entry" id="category" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
<option value="">Select manufacturer</option>
<option value="Mazda">Mazda</option>
<option value="Subaru">Subaru</option>
<option value="Nissan">Nissan</option>
<div class="category_div" id="category_div">Select manufacturer:
<select name="category" class="required-entry" id="category" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
<option value="">Select manufacturer</option>
<option value="Mazda">Mazda</option>
<option value="Subaru">Subaru</option>
<option value="Nissan">Nissan</option>
</select>
</div>

如果我在更改代码使其与项目无关时犯了任何错误，我深表歉意。正如我所说，我对此还很陌生，所以请友善：(

Answer 1

您可以通过在HTML中放置this作为参数来将事件传递给函数(请参阅下面HTML中的onchange(。当我们在JavaScript代码中调用test函数时，会传递事件参数，其中包含有关下拉菜单的所有信息。event.value包含您的选择，因此您可以使用它来确定要添加的值。

JavaScript:

const test = (event) => {
let toAdd = 0
if (event.value == "Nissan") toAdd = 10
if (event.value == "Subaru") toAdd = 5
console.log(5 + toAdd)
}

HTML:

<div class="category_div" id="category_div">
Select manufacturer:
<select name="category" class="required-entry" id="category" onchange="test(this)">
<option value="">Select manufacturer</option>
<option value="Mazda">Mazda</option>
<option value="Subaru">Subaru</option>
<option value="Nissan">Nissan</option>
</select>
</div>

如果要使代码更流畅，可以在函数开始时破坏value属性，这样就可以用curley大括号而不是event来编写value作为参数。然后你可以参考value，而不是event.value。。。

const test = ({value}) => {

而且。。。

if (value == "Nissan") toAdd = 10

这是一支代码在上方的钢笔