时间戳

首页 > 解决方案 > 在 Jquery 中显示从 asIconPicker 的下拉列表中搜索到的图标中选择了一个值

jquery - 在 Jquery 中显示从 asIconPicker 的下拉列表中搜索到的图标中选择了一个值

问题描述

我有一个用于选择某些元素的代码，该代码在您 onSelect 时效果很好，它显示了正确的选项值。问题是当我们搜索下拉列表的 onSelect 值时，我不确定如何显示选定的选项，然后它不起作用。

这是我的 Jsfiddle

$(document).ready(function() {
$('#getIcon').asIconPicker();
// Change the selector here
$('.asIconPicker-list').click(function() {
  setTimeout(function(){
    var html = '<div>Your choice is "' + $('#getIcon').asIconPicker('get') + '"</div>';
    $(html).prependTo($('#api-get-info'));
  },1)
  //return false; // This prevents the dropdown from closing
});
});
<link rel="stylesheet" href="https://wplugin.strandwebsites.com/stack/css/normalize.css">
<link rel="stylesheet" href="https://wplugin.strandwebsites.com/stack/css/main.css">
<link rel="stylesheet" href="https://wplugin.strandwebsites.com/stack/css/prism.css">
<link rel="stylesheet" href="https://wplugin.strandwebsites.com/stack/dist/css/asIconPicker.css">
<link rel="stylesheet" href="https://wplugin.strandwebsites.com/stack/css/font-awesome.min.css">
<link rel="stylesheet" href="https://wplugin.strandwebsites.com/stack/css/asTooltip.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css">
<link href="https://pagecdn.io/lib/easyfonts/fonts.css" rel="stylesheet" />


<script src="https://wplugin.strandwebsites.com/stack/js/jquery.js"></script>
<script src="https://wplugin.strandwebsites.com/stack/js/jquery.toc.js"></script>
<script src="https://wplugin.strandwebsites.com/stack/js/prism.js"></script>
<script src="https://wplugin.strandwebsites.com/stack/js/jquery-asTooltip.min.js"></script>
<script src="https://wplugin.strandwebsites.com/stack/js/jquery-asScrollbar.js"></script>
<script src="https://wplugin.strandwebsites.com/stack/dist/jquery-asIconPicker.js"></script>

<section>
  <span id="toc8"></span>
  <pre class="has-example">
            <div class="example">
              <select id="getIcon" name="default" class="getIcon">
                            <option>fa-user</option>
                            <option>fa-search</option>
                            <option>fa-caret-right</option>
                            <option>fa-star</option>
                            <option>fa-times</option>
                            <option>fa-refresh</option>
                            <option>fa-rocket</option>
                            <option>fa-eye</option>
                            <option>fa-tag</option>
                            <option>fa-bookmark</option>
                            <option>fa-heart</option>
                            <option>fa-adn</option>
                            <option>fa-cloud-upload</option>
                            <option>fa-phone-square</option>
                            <option>fa-cog</option>
                            <option>fa-wrench</option>
                            <option>fa-volume-down</option>
                            <option>fa-caret-down</option>
                            <option>fa-caret-up</option>
                            <option>fa-caret-left</option>
                            <option>fa-thumbs-up</option>
                        </select>
            </div>
            <div class="example" id="api-get-info"></div>
          </section>

标签： jquery

解决方案

将点击事件添加到.asIconPicker-selector-popup并在方法内添加一个条件来检查触发点击的源元素。

$(document).ready(function() {
$('#getIcon').asIconPicker();
// Change the selector here
$("#getIcon").asIconPicker('set', 'fa-search');


$('.asIconPicker-selector-popup').click(function(e){
  if (e.target.tagName === 'I' || e.target.tagName === 'LI') {
      setTimeout(function(){
    var html = '<div>Your choice is "' + $('#getIcon').asIconPicker('get') + '"</div>';
    $(html).prependTo($('#api-get-info'));
  },1)
  }
});
});
<link rel="stylesheet" href="https://wplugin.strandwebsites.com/stack/css/normalize.css">
<link rel="stylesheet" href="https://wplugin.strandwebsites.com/stack/css/main.css">
<link rel="stylesheet" href="https://wplugin.strandwebsites.com/stack/css/prism.css">
<link rel="stylesheet" href="https://wplugin.strandwebsites.com/stack/dist/css/asIconPicker.css">
<link rel="stylesheet" href="https://wplugin.strandwebsites.com/stack/css/font-awesome.min.css">
<link rel="stylesheet" href="https://wplugin.strandwebsites.com/stack/css/asTooltip.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.css">
<link href="https://pagecdn.io/lib/easyfonts/fonts.css" rel="stylesheet" />


<script src="https://wplugin.strandwebsites.com/stack/js/jquery.js"></script>
<script src="https://wplugin.strandwebsites.com/stack/js/jquery.toc.js"></script>
<script src="https://wplugin.strandwebsites.com/stack/js/prism.js"></script>
<script src="https://wplugin.strandwebsites.com/stack/js/jquery-asTooltip.min.js"></script>
<script src="https://wplugin.strandwebsites.com/stack/js/jquery-asScrollbar.js"></script>
<script src="https://wplugin.strandwebsites.com/stack/dist/jquery-asIconPicker.js"></script>

<section>
  <span id="toc8"></span>
  <pre class="has-example">
            <div class="example">
              <select id="getIcon" name="default" class="getIcon" >
                            <option>fa-user</option>
                            <option>fa-search</option>
                            <option>fa-caret-right</option>
                            <option>fa-star</option>
                            <option>fa-times</option>
                            <option>fa-refresh</option>
                            <option>fa-rocket</option>
                            <option>fa-eye</option>
                            <option>fa-tag</option>
                            <option>fa-bookmark</option>
                            <option>fa-heart</option>
                            <option>fa-adn</option>
                            <option>fa-cloud-upload</option>
                            <option>fa-phone-square</option>
                            <option>fa-cog</option>
                            <option>fa-wrench</option>
                            <option>fa-volume-down</option>
                            <option>fa-caret-down</option>
                            <option>fa-caret-up</option>
                            <option>fa-caret-left</option>
                            <option>fa-thumbs-up</option>
                        </select>
            </div>
            <div class="example" id="api-get-info"></div>
          </section>

推荐阅读