flask - How to display a selected dropdown value in same html page?

Question

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 displaying a dropdown like below :

<select name="score">
    {% for score in range(6) %}
    <option value={{score}}> {{score}} </option>
    {% endfor %}
</select>

I am displying thr selected value like :

Your selected score : {{ score }}

I tried and search a lot couldn't find anything. Any leads would be helpful.

The user selection event is fired on the browser side so you need js event handler that do what you want. — balderman
– balderman, Commented Oct 16, 2019 at 18:34
@balderman, I was wondering if we can achieve this without js? — ngShravil.py
– ngShravil.py, Commented Oct 16, 2019 at 18:37
As you can in the answers, js handler is the direction you need to take. — balderman
– balderman, Commented Oct 16, 2019 at 18:42

tjholub · Accepted Answer · 2019-10-16 18:37:44Z

2

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>

answered Oct 16, 2019 at 18:37

tjholub

7144 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sujan Adiga · Accepted Answer · 2019-10-16 18:37:38Z

0

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>

answered Oct 16, 2019 at 18:37

Sujan Adiga

1,3811 gold badge11 silver badges20 bronze badges

Collectives™ on Stack Overflow

flask - How to display a selected dropdown value in same html page?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related