Why createEvent does not work in firefox

Question

I have a div inside that div contains a select option as hidden and I have a script in jquery that when clicking the button shows to list with the option is working well in all browsers only in firefox and that does not work when clicking nothing happens.

Script

$('#botao_categoria').on("click", function () {
  var e = document.createEvent("MouseEvents")
  e.initMouseEvent('mousedown');
  $('#categoria')[0].dispatchEvent(e);
});

HTML

 <div id="categoria_label" class="input_home_pequisa"><span>Escolha uma  categoria</span>
<img id="botao_categoria" style="float:right; margin-top:4px;  cursor:pointer;" src="img/select_home.png">
 </div>
 <div style="visibility: hidden; margin-left:15px;">
<select name="categoria" id="categoria">
  <option value="Escolha uma categoria">Escolha uma categoria</option>
  <option value="restauracao">Restauração</option>
  <option value="hotelaria">Hotélaria</option>
  <option value="comercios">Comércios</option>
  <option value="servicos">Serviços</option>
  <option value="lazer">Lazer</option>
  <option value="bares">Bares</option>
</select>

Answer 1

This is not possible in Firefox. Not even using the new API.

You need to drop-down manually, with HTML and CSS that simulate what you need; increase the size giving the illusion that it is open (https://jsfiddle.net/gL21pssm/); or use a plugin with this functionality (for example https://code.google.com/p/expandselect/)