0

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.

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

2 Answers 2

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>
Sign up to request clarification or add additional context in comments.

Comments

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>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.