Flask - How To Display A Selected Dropdown Value In Same Html Page?
I am developing a flask application, in which I have a dropdown, when I select an option, it should display below the dropdown 'Your selected score : ' and the selected score. I am
Solution 1:
This should work:
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function(){
$('select').on('change', function(){
$('#result').html('Your score is: ' + $(this).find('option:selected').val());
});
});
</script>
</head>
<body>
<select name="score">
{% for score in range(6) %}
<option value="{{score}}">{{score}}</option>
{% endfor %}
</select>
<div id="result"></div>
</body>
</html>
Solution 2:
You need change event fired on select element.
Try,
<select name="score" onchange="updateSelected(event)">
{% for score in range(6) %}
<option value={{score}}> {{score}} </option>
{% endfor %}
</select>
<div id="res"></>
<script>
function updateSelected(event) {
document.getElementById('res').innerHTML = 'Your selected score : ' + event.target.value;
}
</script>
Post a Comment for "Flask - How To Display A Selected Dropdown Value In Same Html Page?"