使用级联下拉菜单为varaible赋值

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

你可以通过在超文本标记语言中把this作为参数传递给你的函数(参见下面超文本标记语言中的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属性的结构，这样你就可以把花括号中的value写成参数，而不是event。然后，您可以继续引用value，而不是event.value...

const test = ({value}) => {

还有..。

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

Here's a pen with the code above