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

时间:2017-04-27 21:00:20

标签: javascript

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

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

1 个答案:

答案 0 :(得分: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。