Checkbox value not being fetched in Firefox but works in chrome

Question

Am working on a drop-down menu whereby I want to fetch the value of the option the user selected on the drop-down list. It works well on Chrome using onmousedown event but does not work on Firefox,, The value gets alerted in Chrome but not on Firefox. Please assist?

Layout

<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>

Function being called which works well in Chrome but not 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

I would recommend not writing inline javascript. Instead add eventListener to your select:

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>