​​ヘッダーを動的に変更するにはどうすればよいですか？

Question

ここで私がドロップダウンから失うことを選択すると、ラベルを勝利から失うように変更したいのですが、ラベル（ヘッダー）を変更することは可能ですか？

<td> 
    <select name="action" id="action" class="mondatory" onchange="getAlert()"> 
     <option value="0">--Select--</option> 
     <option value="win">win</option> 
     <option value="los">lose</option> 
    </select> 
</td> 
<td>win</td> 
<td align="left"> 
    <input type="text" name="win" id="win" size="10" class="mondatory"> 
</td> 

Answer 1

はい、あなたは例えば、バニラJavaScriptを使用して選択するにonChangeイベントリスナーを設定することができます：あなたは双方向をサポートする任意のフレームワーク/ライブラリを使用する場合

//html 
<select id='mySelect' onchange='mySelectOnChange()'> 
    <option value='win'>win</option> 
    <option value='lose'>lose</option> 
</select> 
<span id='result'></span> 
//js 
function mySelectOnChange() { 
    document.querySelector('#result').innerHTML = document.querySelector('#mySelect').value 
} 

あなたはそれをはるかに簡単に行うことができますデータバインディング。例えばAngular.js/Vue.js

Answer 2

ただ、はい、それは可能である。この

<td> 
<select name="action" id="action" class="mondatory" onchange="getAlert()"> 
    <option value="0">--Select--</option> 
    <option value="win">win</option> 
    <option value="lose">lose</option> 
</select> 
</td> 
<td><span id="header_td"></span></td> 
<td align="left"> 
    <input type="text" name="win" id="win" size="10" class="mondatory"> 
</td> 

スクリプトで

<script> 

function getAlert() { 
    var selected_value = document.getElementById('action').value; 
    $("#header_td").text(selected_value); 
} 

</script>