2016-08-01 16 views
0

Hier, wenn ich Verlierer aus Dropdown auswählen, dann möchte ich Label von Win zu verlieren ändern, ist es möglich, Label (Header) zu ändern.Wie ändert man Header dynamisch?

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

Ja, es ist möglich. Beginnen Sie mit der Erstellung der Funktion "getAlert" und fragen Sie hier, ob Ihre Lösung nicht funktioniert. – sabithpocker

+0

Fragen Sie nur nach Änderungen im Browser, was mit JavaScript geschieht? Wenn ja, warum die Tags "Java", "JSP" und "Jsp-Tags" auf Ihre Frage klicken? – nnnnnn

Antwort

0

Ja, können Sie onChange Ereignis-Listener auf dem select mit Vanille JavaScript aktivieren, zum Beispiel ein:

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

Sie können es tun viel einfacher, wenn Sie eine Framework/Bibliothek verwenden unterstützt Zwei-Wege Datenbindung. z.B. Angular.js/Vue.js

+0

Ehrfürchtig, Vielen Dank für schnelle Antwort bro – user2240097

0

versuchen Sie einfach diesen

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

<script> 

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

</script> 
Verwandte Themen