Javascript 基于与二维数组关联的下拉选择设置2个表单字段

我需要一些Javascript帮助

我有一个简单的数组

 var price_eFile = [  //Prov Fee, Gov Fee
 [49.99,0], //ON 
 [99.99,351.50], //BC
 [79.99,250.00] //SK
 ];

还有一些我在表单计算器中使用的值

price_eFileProv = 0;
price_eFileGov = 0;

和下面的HTML

 <div class="col-sm-9 col-xs-6">
        <select name="eFileProv"  class="form-control" id="eFileProv"    onChange="checkeFileJur();Form_Calculator();">              
              <option selected>select province</option>
              <option id="CAN-ON" value="ON">Ontario (ON)</option>                     
              <option id="CAN-BC" value="BC">British Columbia (BC)</option>               
              <option id="CAN-SK" value="SK">Saskatchewan (SK)</option>

        </select>
      </div>
    <div class="col-xs-4 col-sm-2">
          <input name="dis_price_eFileProv" type="text" class="form-control fcalc" id="dis_price_eFileProv" value="" readonly>
      </div>
    <div class="col-xs-4 col-sm-2">
          <input name="dis_price_eFileGov" type="text" class="form-control fcalc" id="dis_price_eFileGov" value="" readonly>
      </div>               

选择省
安大略省（ON）
不列颠哥伦比亚省（不列颠哥伦比亚省）
萨斯喀彻温省（SK）

因此，如果他们选择选项2，我需要根据下拉选择和相应数组将dis_price_eFileProv和price_eFileProv以及dis_price_eFileGov和price_eFileGov设置为各自的值，以便第二个选项将前两个变量设置为99.99，将其他两个变量设置为351.50

---

注意：我没有使用jquery或类似的东西，只是在表单计算器的其余部分使用了良好的ole Javascript

我建议的第一件事是不要使用数组，而是使用对象/散列

当使用数组时，您只是将数值索引任意连接到没有明显意义的值。您还与订单有关，任何更改都可能需要跨代码进行多次调整

通过散列，您可以使用有意义的字符串映射到您的值

以下是为您的用例构造哈希的一种方法：

var price_eFile = {  //Prov Fee, Gov Fee
  'ON': {
   'prov': 49.99,
   'gov': 0
  },
  'BC': {
   'prov': 99.99,
   'gov': 351.50
  },
  'SK': {
   'prov': 79.99,
   'gov': 250.00
  }
};

现在，无论何时进行选择，都可以轻松确定需要哪些价格：

function FormCalculator(e) {
  var state = e.target.value;      // obtain the state from the selected option value
  var prices = price_eFile[state]; // obtain the prices from the state name

  // set proper prices to proper places
  inputForProv.value = prices.prov;
  inputForGov.value = prices.gov;
}

---

剩下的就是将上述函数附加到DOM。

数组元素的顺序与下拉选项的顺序不同。它应该如何知道信件？所以不是免费的编码服务。你必须自己尝试解决这个问题。如果您无法使其工作，请发布您尝试的内容，我们将帮助您修复它。请使用一个对象，而不是数组，该对象的键是选项值，值是两个价格。然后，当用户选择一个选项时，您将获得

的值，并将其用作对象的索引。然后您可以适当地设置变量。不要忘记，当您实际执行购买时，您需要在服务器上计算价格，而不是在客户端。否则，用户可以进入DevTools并更改价格。好的，我修复了错误的下拉html。他已经使用

onChange=“checkeFileJur（）；Form_Calculator（）”附加了函数

只需将您的

onSelectChange

函数重命名为

FormCalculator

我不知道这里发生了什么：//将适当的价格设置到适当的位置inputForProv.value=prices.prov；inputForGov.value=prices.gov；我应该换成吗？dis_price_eFileProv.value=price_eFileProv；dis_price_eFileGov.value=price_eFileGov；您需要使用document.querySelector之类的工具从DOM中获取输入，然后在每次选择更改时为它们提供值。我完全不懂这些东西。我收到类型错误e未定义。。。