javascript - 根据与二维数组相关的下拉选择设置 2 个表单字段

Question

我需要一些 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>               

因此，如果他们选择选项2，我需要根据下拉选择和相应的数组将 dis_price_eFileProv 和 Price_eFileProv 以及 dis_price_eFileGov 和 Price_eFileGov 设置为各自的值，以便第二个选项将前两个变量设置为 99.99，其他 2 个变量设置为 99.99变量为 351.50注意:我没有使用 jquery 或类似的东西，只是在我的表单计算器的其余部分中使用了很好的 ole Javascript。

Answer 1

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

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

通过哈希，您可以使用有意义的字符串映射到您的值。

这是为您的用例构建哈希的一种方法:

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。