jquery – Why does createEvent not work in firefox

Question:

I have a div that within this div contains a select option as hidden and have a script in jquery that clicking the button shows the list with the option is working well on all browsers only in firefox and it does not work when you click 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:

This is not possible in Firefox. Nor using the new API.

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

Scroll to Top