如何改变 <td> 标头动态吗？

Question

Here when i select lose from drop down then I want to change label from win to lose, is it possible to change label (header).

<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

Yes, you can set onChange event listener on the select with vanilla javascript, for example:

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

You can do it much more simpler if you use any framework/library supporting two-way data binding. eg Angular.js / Vue.js

Answer 2

Just try this

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

In your script

<script>

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

</script>