如何在组合框的选择上填充文本框值

how to populate the textbox value on the selection of a combo box

本文关键字：填充 文本 选择 组合      更新时间：2023-09-26

我有一个表单，它有一个组合框和三个文本框。这三个文本框用于计算目的。第一个文本框是金额，第二个文本框是收到的，最后一个文本框是只读的，它显示余额，组合有值- full, part和none。如果用户选择full，则接收到的文本框应该变为只读，并且在金额文本框中输入的金额应该出现在接收到的文本框中。如果用户选择部分，则文本框应该可供用户输入金额。如果用户选择none，则余额文本框应该填充在金额文本框中输入的值。

<select id="pay" name="pay" tabindex="12">
    <option value=""></option>                           
    <option value="1">Full</option>                           
    <option value="2">Part</option>
    <option value="3">None</option>                            
</select>
<input type="text" id="amt" name="amt" value="" 
    size ="8" onblur="calculateText()" 
    style="background-color:transparent; color:blue; text-align:right" 
    tabindex="17"/>
<input type="text" id="resc" name="resc" value="" 
    disabled="disabled" size ="8" onblur="calculateText()"  
    tabindex="18"/>
 <input type="text" id="bal" name="bal"  
    readonly="readonly" value="" size ="8" 
    onblur="calculateText()" tabindex="19"/>

新增jsFiddle: http://jsfiddle.net/MackieeE/fjXzY/1/

这里有一些东西可以让你开始。它或多或少地满足了你的要求，有一些可用性问题因为你没有说在每种情况下做什么，只有有限的情况。我把它留给你，让它像你想要的那样工作。

<script>
function calculateText(el) {
  var form = el.form;
  var idx = form.pay.selectedIndex;
  if (idx <= 0) {
    form.reset();
    return;
  }
  if (form.pay.value == 1) {
    form.resc.disabled = true;
    form.resc.value = form.amt.value;
    form.bal.value = 0;
  } else if (form.pay.value == 2) {
    form.resc.disabled = false;
    form.bal.value = form.amt.value - form.resc.value;
  } else if (form.pay.value == 3) {
    form.resc.disabled = true;
    form.resc.value = 0;
    form.bal.value = form.amt.value;
  }
}
</script>
<form>
  <select name="pay" onchange="calculateText(this);">
    <option selected>Please select an option</option>                           
    <option value="1">Full                   
    <option value="2">Part
    <option value="3">None
  </select><br>
  Amount: <input name="amt" onblur="calculateText(this)"><br>
  Received: <input name="resc" disabled onblur="calculateText(this)"><br>
  Balance: <input name="bal" readonly><br>
  <input type="reset">
</form>

请在javascript框架中编写以下代码，并检查这是否是您想要的。

function UpdatePay( n ) {
     if(n.options[n.selectedIndex].value==2){
         document.getElementById('amt').style.display='none';
        document.getElementById('resc').disabled = false;
        }
      if(document.getElementById('pay').value==3){
        document.getElementById('bal').value=document.getElementById('amt').value
        document.getElementById('resc').value=document.getElementById('amt').value
    }
    if(document.getElementById('pay').value==2){
        document.getElementById('bal').value=document.getElementById('resc').value
    }
}       document.getElementById('resc').value=document.getElementById('amt').value
    }
    if(document.getElementById('pay').value==2){
        document.getElementById('bal').value=document.getElementById('resc').value
    }
}
相关文章：