title: Dynamically update price js or jquery from selected option
body: <p>I would like to dynamically update the content of a span supposed to display the price of the selected option.
  PS: I'm using Django + Python to generate the options</p>
  
  <p>Here is my code :</p>
  
  <pre><code>&lt;select class="form-control" id="materials"&gt;
      {% for material2 in materials %}
          &lt;option value="{{ material2.name }}" data-price="{{ material2.price }}"&gt;{{ material2.name }} + &lt;span id="material_price"&gt;{{ material2.price }}€&lt;/span&gt;&lt;/option&gt;
      {% endfor %}
  &lt;/select&gt;
  &lt;span id="price_material"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>This is what I've tried :</p>
  
  <pre><code>var material = document.getElementById("materials")
  material.onchange = function() {
      var txt = document.getElementById("#material_price").value;
      document.getElementById("price_material").innerText = txt
  </code></pre>
  
  <p>Please help me if you know the answer.</p>