I've found that onClick with option elements works only with Firefox desktop version. It does not work on mobiles and with Chrome desktop/mobile. I've read that onChange should be used with the select element instead of onClick. I tried but does not work. The original version is something like this:
const ASV = "ASV";
const ASVtext = "ASVtext";
const KJV = "KJV";
const KJVtext = "KJVtext";
const setBibleVersion = (x, y) => alert(x + " " + y);
export default function App() {
return (
<div className="App">
<h1>onClick / onSearch with select </h1>
<select defaultValue="ASV">
<option value="ASV" onClick={() => setBibleVersion(ASV, ASVtext)}>
{ASVtext}
</option>
<option value="KJV" onClick={() => setBibleVersion(KJV, KJVtext)}>
{KJVtext}
</option>
</select>
</div>
);
}
And I tried this but this does not work too:
const setBibleVersion = x => alert(x);
export default function App() {
return (
<div className="App">
<h1>onClick / onSearch with select </h1>
<select defaultValue="ASV" onSearch={(value) => setBibleVersion(value)}>
<option value="ASV">{ASVtext}</option>
<option value="KJV">{KJVtext}</option>
</select>
</div>
);
}
The main goal is to execute a function with the value of a chosen option.