javascript - 使用链接防止默认选择输入行为

Question

我有一个基于 bootstrap 和 jQuery 的选择框，它使用以下插件:http://codeb.it/fonticonpicker/

这是一个图标选择器。选择框的行为类似于输入字段，并显示带有图标的下拉菜单。

我想做的是阻止显示选择框，而是使用链接打开下拉列表(显示选择选项)。

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

我似乎无法让它工作。如果我在没有链接的情况下使用它，它工作正常。任何想法都会很棒。谢谢

Answer 1

请看下面的代码。在这里，我试图以编程方式打开图标选择器:

$(document).ready(function($) {
  $('#myselect').fontIconPicker();

  $("#icon_upload_link").on('click', function(e) {
    e.preventDefault();
    $('#myselect').prev(".icons-selector").find("span.selector-button").trigger('click');
    e.stopImmediatePropagation()

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="http://codeb.it/fonticonpicker/jquery.fonticonpicker.min.js?v=2.0.0"></script>
<link rel="stylesheet" type="text/css" href="http://codeb.it/fonticonpicker/css/jquery.fonticonpicker.min.css?v=2.0.0" />



<link rel="stylesheet" type="text/css" href="http://codeb.it/fonticonpicker/themes/grey-theme/jquery.fonticonpicker.grey.min.css" />

<!-- optional themes -->
<link rel="stylesheet" type="text/css" href="http://codeb.it/fonticonpicker/themes/dark-grey-theme/jquery.fonticonpicker.darkgrey.min.css" />
<link rel="stylesheet" type="text/css" href="http://codeb.it/fonticonpicker/themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="http://codeb.it/fonticonpicker/themes/inverted-theme/jquery.fonticonpicker.inverted.min.css" />

<link rel="stylesheet" type="text/css" href="http://codeb.it/fonticonpicker/fontello-7275ca86/css/fontello.css" />
<link rel="stylesheet" type="text/css" href="http://codeb.it/fonticonpicker/icomoon/style.css" />


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