html - Does the JavaScript onclick event not work on <select> <option>'s?

Question

For some reason the code below it is not working correctly. Unless I'm being quite stupid with my JavaScript I can't see what's going wrong besides the onclick events not firing on the <option>s.

function showOther() {
  document.getElementById('other').value = "";
  document.getElementById('other').style.display = 'block';
  document.getElementById('otherBR').style.display = 'block';
}

function hideOther() {
  document.getElementById('other').style.display = 'none';
  document.getElementById('otherBR').style.display = 'none';
}

#other {
  display: none;
}
#otherBr {
  display: none;
}

<select name="" id="drop_down">
  <option value="choose" onclick="hideOther();">Please choose</option>
  <option value="Allure" onclick="hideOther();">Allure</option>
  <option value="Elle" onclick="hideOther();">Elle</option>
  <option value="In-Style" onclick="hideOther();">In-Style</option>
  <option value="other" id="otherOption" onclick="showOther();">Other</option>
</select>
<input type="text" name="fields_where" id="other" placeholder="Other" />
<br id="otherBR" />

Answer 1

Add this function to your JS:

function showHideOther(){
    if (document.getElementById('drop_down').value == 'other') {
         showOther();   
    } else {
         hideOther();   
    }
}

And change your select element like this:

<select name="" id="drop_down" onchange="showHideOther();">
        <option value="choose">Please choose</option>
        <option value="Allure">Allure</option>
        <option value="Elle">Elle</option>
        <option value="In-Style">In-Style</option>
        <option value="other">Other</option>
</select>

function showHideOther() {
  if (document.getElementById('drop_down').value == 'other') {
    showOther();
  } else {
    hideOther();
  }
}

function showOther() {
  document.getElementById('other').value = "";
  document.getElementById('other').style.display = 'block';
  document.getElementById('otherBR').style.display = 'block';
}

function hideOther() {
  document.getElementById('other').style.display = 'none';
  document.getElementById('otherBR').style.display = 'none';
}

#other {
  display: none;
}
#otherBr {
  display: none;
}

<select name="" id="drop_down" onchange="showHideOther();">
  <option value="choose">Please choose</option>
  <option value="Allure">Allure</option>
  <option value="Elle">Elle</option>
  <option value="In-Style">In-Style</option>
  <option value="other">Other</option>
</select>
<input type="text" name="fields_where" id="other" placeholder="Other" />
<br id="otherBR" />