So I developed a functioning website in Firefox, but when running in google chrome, it breaks. I've boiled down the problem to be the onclick attribute not working inside select options, but what can I use as a replacement?

<select id="n1">
  <option id="n1h" disabled selected hidden>First Note</option>
  <option id="n1o1" onclick="keyC()">C</option>
  <option id="n1o2" onclick="keyDb()">D&#9837;</option>
  <option id="n1o3" onclick="keyD()">D</option>
  <option id="n1o4" onclick="keyEb()">E&#9837;</option>
  <option id="n1o5" onclick="keyE()">E</option>
  <option id="n1o6" onclick="keyF()">F</option>
  <option id="n1o7" onclick="keyGb()">G&#9837;</option>
  <option id="n1o8" onclick="keyG()">G</option>
  <option id="n1o9" onclick="keyAb()">A&#9837;</option>
  <option id="n1o10" onclick="keyA()">A</option>
  <option id="n1o11" onclick="keyBb()">B&#9837;</option>
  <option id="n1o12" onclick="keyB()">B</option>
</select>

Thanks!