Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to print option value in html element?

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>
like image 636
ofek Avatar asked Nov 20 '25 20:11

ofek


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>
like image 179
Yevhen Kuzmenko Avatar answered Nov 22 '25 10:11

Yevhen Kuzmenko



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!