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

在jquery中使用.show()。它用于显示前端可见id myselect的选择框

$("#myselect").show();

您的代码就像

$(function(){
        $("#icon_upload_link").on('click', function(e){
          e.preventDefault();
          $("#myselect").show();
        })
});

Answer 2

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

＆＃13;

$(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()

  });

});

＆＃13;

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

＆＃13;

Answer 3

你可以尝试使用css，从display none到block。

$(function(){
    $("#icon_upload_link").on('click', function(e){
       e.preventDefault();
       $("#myselect").css('display','block');
});
});

Answer 4

我认为，你应该重构选择另一个bootstrap下拉列表。据我所知，只有在Chrome中使用此代码才能打开选择：

event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
document.getElementById('myselect').dispatchEvent(event);

如何避免使用选择

有很多选择

使用链接阻止默认选择输入行为

4 个答案: