Събитието за кликване не работи върху маркера за опция за избор на html в браузъра chrome

Опитайте да редактирате функцията onclick на маркера select, за да извикате onclick на маркера option. Проблемът сега е, че може да се обади два пъти във FireFox.

function getSelectedOption(select) {
    return select.options[select.selectedIndex];
}

За да видите в действие ->

<select onclick='getSelectedOption(this).click()'>
  <option onclick='log("foo")' >foo</option>
  <option onclick='log("bar")' >bar</option>
</select>

<p id="display"></p>

<script> 
function log(text) {
  document.getElementById('display').innerHTML = text;
}

function getSelectedOption(select) {
   return select.options[select.selectedIndex];
}
</script>

Освен това проблемът с това е, че onclick се задейства веднъж за щракване върху опцията и друг за избор (след това firefox идва за друг). И така, най-добрият начин, който открих да коригирам това, е да го променя на onchange за маркера select.

Но за съжаление това премахва само първоначалното щракване, а не правилния начин на щракване на FireFox...

Така че, ако променим нашата функция getSelectedOption, за да проверим дали браузърът е хром, тогава можем да се покрием!

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

Нашата нова функция може да изглежда по следния начин...

clickSelectedOption(select) {
    if(!is_chrome) return;
    select.options[select.selectedIndex].click();
}

Смесете всичко заедно!

<select onchange='clickSelectedOption(this)'>
 <option onclick='log("foo")' >foo</option>
 <option onclick='log("bar")' >bar</option>
</select>

<p id="display"></p>

<script>
  var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
         
  function log(text) {
    document.getElementById('display').innerHTML = text;
  }

  function clickSelectedOption(select) {
    if(!is_chrome) return;
       select.options[select.selectedIndex].click();
  }
</script>