javascript - 根据下拉选项更改多个输入字段的值(js 或 PHP 开关)

Question

我有一个下拉菜单，我需要根据下拉菜单选择更新三个输入字段值。

下拉是这样的:

 <form action="#" method="post">

  <select id="call_out_fee">
 <option selected disabled>select...</option>
 <option value="fourhundred">400.00</option>
 <option value="threefifty">350.00</option>
 <option value="threehundred">300.00</option>
 <option value="twohundred">200.00</option>
 <option value="zero">0.00</option> 
 </select>

<p>Tech charge: <input name="tech_charge" value="" readonly="readonly" onfocus="this.blur()" /></p>
<p>Call out: <input name="call_out" value="" readonly="readonly" onfocus="this.blur()" /></p>
<p>Agent fee: <input name="agent_fee" value="" readonly="readonly" onfocus="this.blur()" /></p>

我可以使用以下内容更新其中一个字段:

<script>
function updateTechCharge (el, priceLog, priceList) {
priceLog.value = 'R' + priceList[el.getElementsByTagName('option')     [el.selectedIndex].value.toLowerCase()];
}

var techCharges = {
'fourhundred' : 400,
'threefifty' : 350,
'threehundred' : 300,
'twohundred' : 400,
'zero' : 0
};

var select = document.getElementById('call_out_fee'),
hidden = document.getElementsByName('tech_charge')[0];

select.addEventListener('change', function(){
updateTechCharge(select, hidden, techCharges);
});
</script>

我尝试用 PHP switch 来做，但没有成功。

由于我对 js 的了解非常有限，我需要用不同的值更新所有这三个字段，所以我请求您的帮助。

基于下拉列表的值应如下所示:

option "fourhundred" > 
tech_charge: 400, call_out: 400, agent_fee: 50

option "threefifty" > 
tech_charge: 350, call_out: 350, agent_fee: 60

option "threehundred" > 
tech_charge: 300, call_out: 300, agent_fee: 70

option "twohundred" >
tech_charge: 400, call_out: 200, agent_fee: 80

option "zero" > tech_charge: 400, call_out: 0, agent_fee: 90

提前谢谢你。

Answer 1

我会这样做，并将“charge-type”类添加到每个输入:

function updateTechCharge (el, priceList) {
  var elems = document.getElementsByClassName('charge-type')

  var price = priceList[el.getElementsByTagName('option')[el.selectedIndex].value.toLowerCase()];

  for (var i = 0; i < elems.length; i++) {
      var item = elems[i];
      item.value = 'R' + price[i];
  }
}

var techCharges = {
  'fourhundred' : [400, 400, 50],
  'threefifty' : [350, 350, 60],
  'threehundred' : [300, 300, 70],
  'twohundred' : [400, 200, 80],
  'zero' : [400, 0, 90]
};

var select = document.getElementById('call_out_fee'),
hidden = document.getElementsByName('tech_charge')[0];

select.addEventListener('change', function(){
  updateTechCharge(select, techCharges);
});

See this jsfiddle