Obtain selected text

I have a select box


<select name="provider_id" id="Username" class="select"> 
                    <option value=4>anyone</option> 
<option value=2>Balena</option> 
<option value=3>Eschimossa</option> 
<option value=1>Sandra J.</option> 
                    </select>

I’m trying to get the selected text in the selection.

I gather I do something like
… onchange=“this.options[this.selectedIndex].text”>
How do I store that value in a variable so I can display it on the next page (once the form is submitted)

Thanks

When you say next page do you mean that the page refreshes to show the next part of the form? If so you can use JavaScript to keep the value stored by itself, you would need to use something like the HTML5 localStorage API to keep the value stored away in the users browser which allows you to retrieve/update/delete it at any point in time.

For example you could use the following to set the value, the key is based on the input field name.

function onSelectChange() {
    localStorage.setItem(this.name, this.options[this.selectedIndex].value);
}

To retrieve the value use something like the following.

function getStoredItem(key) {
    return localStorage.getItem(key);
}

alert(getStoredItem('provider_id'));

thanksss