How to get the target value of a selected option in a dropdown

Question

My HTML looks like this, and I want to get the value of it when I click one of the options. Ive tried many things, but none work.

<select id="sortby" name="sortby">
   <option value="cook">cook</option>
   <option value="price">price</option>
   <option value="calories">calories</option>
   <option value="quantity">quantity</option>
</select>

Answer 1

You can use the change event and get the selected option value after onchange event triggered.

 var mySelect = document.getElementById('sortby'); var showTheValue = document.getElementById('show-value'); mySelect.addEventListener('change', function (event) { var value = event.target.selectedOptions[0].value; showTheValue.innerText = value; });

 <select id="sortby" name="sortby"> <option value="cook">cook</option> <option value="price">price</option> <option value="calories">calories</option> <option value="quantity">quantity</option> </select> <p id="show-value"></p>