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

Question

我有一个窗体，它有一个组合框和三个文本框。三个文本框是用于计算目的。第一个文本框是金额，第二个是收到的，最后一个是只读的，显示余额和组合具有值 - 完整，部分和无。 如果用户选择完整，则接收的文本框应该变为只读，并且在文本框中输入的金额应该出现在收到的文本框中。如果用户选择部分，则文本框应该可供用户输入金额。如果用户选择无，那么余额文本框应填入在金额文本框中输入的值。

<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/

Answer 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> 

Answer 2

请使用JavaScript编写框架下面的代码在你的jsfiddle和检查，如果这是你想..

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 
    } 

}