JSFiddle - React, Tailwind, and code Playground
HTML
<select id="city">
<option value="A">
<!-- Demonstrating how tags are stripped out in the rendering and the javascript values -->
<p>Mumbai</p>
<p>Which is a town in <em>India</em>
</p>
</option>
<option value="B">Bangalore</option>
<option value="C">Delhi</option>
<option value="D">Indore</option>
</select>
<button onClick='displaySelectedOption()'>Display Selected Option</button>
JavaScript
function displaySelectedOption() {
var cityElem = document.getElementById('city');
var selectedIndex = cityElem.selectedIndex;
if (selectedIndex != -1) {
var selectedOption = cityElem.options[selectedIndex];
var optionInnerHtml = selectedOption.innerHTML;
alert(optionInnerHtml);
console.log(optionInnerHtml);
}
}