Значение флажка не извлекается в Firefox, но работает в Chrome

Question

Я работаю над раскрывающимся меню, в котором я хочу получить значение параметра, выбранного пользователем в раскрывающемся списке. Он хорошо работает в Chrome, используя событие onmousedown, но не работает в Firefox. Значение получает предупреждение в Chrome, но не в Firefox. Пожалуйста помогите?

раскладка

<div class="check-now" style="width: 100%;">
      <h1 class="cover-travel">Child(ren)</h1>
          <select name="child" id="child" onmousedown="this.value='';" onchange="checkChild(this.value)">
            <option value="0">None</option>
            <option value="1">1</option>
            <option value="2"> 2</option>
            <option value="3"> 3 </option>
            <option value="4"> 4 </option>
            <option value="5"> 5 </option>
         </select> 
    </div>

Вызываемая функция, которая хорошо работает в Chrome, но не в Firefox

function checkChild(val) {
      alert(val);
      //Child One
      if (val == 1){
         //Add code
      }
      //Child Two
      else if (val == 2){
        //Add code 2
      }
      //Child Three
      else if(val == 3){
        //Add code 3
      }
      //Child Four
      else if(val == 4){
        //Add code 4
      }
      //Child Five
      else if(val == 5){
        //Add code 5
      }
      else{
         //Else code
      }
    }

Answer 1

Я бы порекомендовал не писать встроенный JavaScript. Вместо этого добавьте eventListener к вашему выбору:

var mySelect = document.getElementById('child');

mySelect.addEventListener('change', function(e) {

  if (this.value == 1) {
    console.log('val is 1');
  } else if (this.value == 2) {
    console.log('val is 2');
  } else if (this.value == 3) {
    console.log('val is 3');
  } else if (this.value == 4) {
    console.log('val is 4');
  } else if (this.value == 5) {
    console.log('val is 5');
  } else {
    console.log('val not specified');
  }

});

<div class="check-now" style="width: 100%;">
  <h1 class="cover-travel">Child(ren)</h1>
  <select name="child" id="child">
    <option value="0">None</option>
    <option value="1">1</option>
    <option value="2"> 2</option>
    <option value="3"> 3 </option>
    <option value="4"> 4 </option>
    <option value="5"> 5 </option>
  </select> 
</div>