CODEWITHSUNDEEP
javascripthtmlflaskdomhtml-select
Aladin Oliver Yu
Aladin Oliver Yu

Reputation: 35

How to set select option equal to innerHTML

I'm currently using flask to program this code. My problem is I need to make the option value equal to the inner text of the option.

{% for symb in symbol %}
<script src="/static/script.js"></script>
<option id="options" value="0">{{ symb["symbol"] }}</option>
{% endfor %}

This is the code for the /static/script.js

let option = document.querySelector('option').text;
changeContent(option);
function changeContent(option)
{
     var opt = document.querySelector('option').options[0];
     opt.value = option;
}

If I run the code, the option presents the actual text of {{ symb["symbol"] }}. However, it does copy it to the option value.

Upvotes: 3

Views: 931

Answers (1)

TommyBs
TommyBs

Reputation: 9646

Added this as an answer to update on the comment seen as it solved the issue and may help others

You’re approaching this the wrong way. Rather than using JavaScript to do this render your template with the correct values to begin with

Also as it stands, you're including your script tag within your for loop. This probably isn't what you want, so move it outside the for.

e.g

<script src="/static/script.js"></script> 
{% for symb in symbol %} 

<option id="options" value="{{symb["symbol"]}}">{{ symb["symbol"] }}</option> 
{% endfor %}

Apologies for the formatting I’m on mobile

Upvotes: 2

Related Questions