Prevent default select input behaviour by using link

I have a select box based on bootstrap and jQuery which uses the following plugin:http://codeb.it/fonticonpicker/

It is an icon picker. The select box behaves like an input field and shows a dropdown with icons.

What I'm trying to do is prevent the select box for being shown and instead, use a link to open the dropdown (display the select options).

$(function() {
  $("#icon_upload_link").on('click', function(e) {
    e.preventDefault();
    $("#myselect:hidden").trigger('focus');
  });
});

#myselect {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="" id="icon_upload_link">Select Icon </a>
<select id="myselect" name="myselect" class="myselect">
  <option value="">No icon</option>
  <option>icon-headphones</option>
  <option>icon-music</option>
  <option>icon-play</option>
  <option>icon-video-camera</option>
  <option>icon-dice</option>
</select>

I can't seem to get it to work. If I use it without the link, it works fine. Any ideas would be great. Thanks