How to print option value in html element?

user_14641864 0
Viewed 698

i am trying to add an h2 element that shows and updating price based on selected option value.

Here is my current code: 

<select name="price">
  <option value="2799"> 1-6 תשלומים</option>
  <option value="3200">12 תשלומים </option>
  <option value="2799"> 36 תשלומים</option>
</select>

html-select html javascript
1 Answers

We can print option value by adding onchange event on it. 

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>
        <select name="price" onchange="changePrice()">
            <option value="2600"> 1-6 תשלומים</option>
            <option value="3200">12 תשלומים </option>
            <option value="2799"> 36 תשלומים</option>
        </select>
        <h2 id="id"></h2>
        <script>
            function changePrice() {
                var selector = document.getElementsByName("price")[0];
                var value = selector[selector.selectedIndex].value;
                document.getElementById('id').innerHTML = value;
            }
            document.addEventListener("DOMContentLoaded", changePrice);
        </script>
    </body>
    </html>

user_53799440
Related