In a dropdown list, I would like to be able to display custom text based on the choice made in the list.  

In my example below, I manage to display the selected value in the dropdown.  

But for example, instead of displaying "var1", I would like to display more text, for example :

* if "var1" then display "Variable 1 is built with ... (long text)"
* if "var2" then display "Variable 2 is important because... (long text)"

Many thanks in advance !

```
<!DOCTYPE html>

<body>
    <h1 style="color: green">
        Que recherchez vous ?
    </h1>

<p> 
        <select id="select1">
            <option value="var1">Variable 1</option>
            <option value="var2">Variable 2</option>
            <option value="var3">Variable 3</option>                        
        </select>
    </p>

<button onclick="getOption()"> Check option </button>

    <script type="text/javascript">
    function getOption() {
        selectElement = document.querySelector('#select1');
        output = selectElement.value;
        document.querySelector('.output').textContent = output;
    }
    </script>

<p> The value of the option selected is:
        <span class="output"></span>
    </p>

</body>

</html>

```