Question

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

Dropdown就像这样：

 <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开关做到这一点，但是没有运气。

由于我对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

Answer 2

也许这个小片段对您有帮助

html：

...
<select id="mySelect">
  <option value="">nothing selected</option>
  <option value="case1">case 1 text</option>
  <option value="case2">case 2 text</option>
</select>
...

js（使用JQuery和> ES5）

...
let selectNode = $('#select');
selectNode.on('change', (event) => {

  // stop event bubbling and default handling
  event.preventDefault();
  event.stopPropagination();

  // get the selected value, if '' set undefined
  let selectedValue = selectNode.val() || undefined;

  // switch by the value with default case
  switch(selectedValue) {
    case 'case1':
      console.log('do something for case 1');
      break;
    case 'case2':
      console.log('do something else');
      break;
    default:
      console.warn('no selection');
  }
}};
...

Answer 3

以下是一个如何使用case（switch）语句来执行此操作的示例，如您在帖子中所要求的：

 <script>
    //Not necessary
    //var techCharges = {
    //'fourhundred' : 400,
    //'threefifty' : 350,
    //'threehundred' : 300,
    //'twohundred' : 400,
    //'zero' : 0
    //};

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

select.addEventListener('change', function(){
     //Use case statement on the drop down's value property
     switch(this.value){
         case "fourhundred":
         UpdateTechCharges(400, 400, 50);
         break;
         case "threefifty":
         UpdateTechCharges(350, 350, 60);
         break;
         case "threehundred":
         UpdateTechCharges(300, 300, 70);
         break;
         case "twohundred":
         UpdateTechCharges(400, 200, 80);
         break;
         case "zero":
         UpdateTechCharges(400, 0, 90);
         break;
     }
});

//function to set the input elements
function UpdateTechCharges(techCharge, callout, agentFee){
    document.getElementsByName('tech_charge')[0].value = 'R' + techCharge;
    document.getElementsByName('call_out')[0].value = 'R' + callout;
    document.getElementsByName('agent_fee')[0].value = 'R' + agentFee;

}
</script>

根据下拉选项更改多个输入字段的值（js或PHP开关）

3 个答案: