输入不更新其依赖输入

Question

这里是我的4个输入字段;

//Main Category 
<select id="category" name="category" required onchange="jsfunction(this)"> 
      <option value=""></option> 
      <option value="Non-Current Asset">Non-Current Asset 11</option> 
      <option value="Current Asset">Current Asset 12</option> 
</select><br> 

//Sub Code 
    <input id="sub_code" type="number" min="11" max="99" name="sub_code" required placeholder="11 to 99" oninput="account_code.value = parseInt(main_code.value + sub_code.value)"><br> 
//Main Code 
    <input id="main_code" type="text" name="main_code" readonly placeholder="Do not fill this." oninput="account_code.value = parseInt(main_code.value + sub_code.value)"><br> 
// Account Code 
    <input id="account_code" type="text" max="2" name="account_code" readonly placeholder="Do not fill this."> 

当我选择“主类别”输入时，它会正确更新“主代码”字段。

“帐户代码”字段是“子代码”和“帐户代码”的合并。

问题是，当“子代码”已填写且我更改“主类别”输入时，此更改不会转移到“科目代码”字段。

这里是我的Javascript

<script> 
function jsfunction(element) 
{ 
    var mnCode = element.options[element.selectedIndex].text; 
    mnCode = mnCode.replace(/[^0-9]/g, ''); 
    document.getElementById("main_code").value=mnCode; 
} 
</script> 

而且这里是javascript代码，当我把它写在JavaScript对话框不工作的小提琴。 https://jsfiddle.net/caabdul/8jpdtqs0/

function jsfunction(element) 
 
{ 
 
    var mnCode = element.options[element.selectedIndex].text; 
 
    mnCode = mnCode.replace(/[^0-9]/g, ''); 
 
    document.getElementById("main_code").value=mnCode; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Main Category* <select id="category" name="category" required onchange="jsfunction(this)"> 
 
         <option value=""></option> 
 
         <option value="Non-Current Asset">Non-Current Asset 11</option> 
 
         <option value="Current Asset">Current Asset 12</option> 
 
         </select><br> 
 
Sub Code*  <input id="sub_code" type="number" min="11" max="99" name="sub_code" required placeholder="11 to 99" oninput="account_code.value = parseInt(main_code.value + sub_code.value)"><br> 
 
Main Code  <input id="main_code" type="text" name="main_code" readonly placeholder="Do not fill this." oninput="account_code.value = parseInt(main_code.value + sub_code.value)"><br> 
 
Account Code* <input id="account_code" type="text" max="2" name="account_code" readonly placeholder="Do not fill this.">

Answer 1

有几个问题与您的代码：

1. 您需要在代码中手动触发事件oninput因为当你改变值也不会触发编程。
2. 在添加之前解析字符串值，否则结果将是输入值的字符串连接。

Main Category* 
 
<select id="category" name="category" required onchange="jsfunction(this)"> 
 
    <option value=""></option> 
 
    <option value="Non-Current Asset">Non-Current Asset 11</option> 
 
    <option value="Current Asset">Current Asset 12</option> 
 
</select> 
 
<br>Sub Code* 
 
<input id="sub_code" type="number" min="11" max="99" name="sub_code" required placeholder="11 to 99" oninput="account_code.value = (Number(main_code.value) + Number(sub_code.value))||0"> 
 
<br>Main Code 
 
<input id="main_code" type="text" name="main_code" readonly placeholder="Do not fill this." oninput="account_code.value = (Number(main_code.value) + Number(sub_code.value))||0"> 
 
<br>Account Code* 
 
<input id="account_code" type="text" max="2" name="account_code" readonly placeholder="Do not fill this."> 
 
<script> 
 
    function jsfunction(element) { 
 
    var mnCode = element.options[element.selectedIndex].text; 
 
    var input = document.getElementById("main_code"); 
 
    mnCode = mnCode.replace(/[^0-9]/g, ''); 
 
    input.value = mnCode; 
 
    input.oninput() 
 
    } 
 
</script>

Answer 2

这个原因，你都在主代码oninput事件改变计费代码输入值，你需要补充一点，说明变更的价值，您function jsfunction(element)

<script> 
function jsfunction(element) 
{ 
    var mnCode = element.options[element.selectedIndex].text; 
    mnCode = mnCode.replace(/[^0-9]/g, ''); 
    document.getElementById("main_code").value=mnCode; 
    account_code.value = parseInt(main_code.value + sub_code.value); 
}</script>