JSFiddle - React, Tailwind, and code Playground

HTML

<form action="#" id="myform" onsubmit="test ();">
<select onchange="customOption = this . options [ this . selectedIndex ] . value;">
<option value="important value number 0">Do not choose me 0</option>
<option value="important value number 1">Do not choose me 1</option>
<option value="important value number 2">Do not choose me 2</option>
<option value="important value number 3">Do not choose me 3</option>
<option value="important value number 4">Do not choose me 4</option>
<option value="important value number 5">Do not choose me 5</option>
<option value="important value number 6">Do not choose me 6</option>
<option value="important value number 7">Do not choose me 7</option>
<option value="important value number 8">Do not choose me 8</option>
<option value="important value number 9">Do not choose me 9</option>
</select>
<input type="submit" value="Test" />
</form>

CSS

html, body { margin: 0; padding: 0; }
input[type=submit] { padding: 2px; }

JavaScript

window . onload = function ()
{
"use strict";
document . querySelector ( "form#myform > select" ) . selectedIndex = -1;
}

function test ()
{
"use strict";
if ( typeof customOption === "undefined" ) { alert ( "FATAL SYSTEM ERROR !" ); return; }
alert ( "Valid option selected ! Congratulations !\nYour selected value is: \"" + customOption + "\"" );
}