我有一个用来选择某些元素的代码,当你点击geticon按钮并显示正确的选项值时,该代码工作得很好。问题是我不确定如何显示下拉菜单的选择选项值(而不是按钮)。
这是我的Jsfiddle
null
$(document).ready(function() {
$('#getIcon').asIconPicker();
$('#api-get-click').click(function() {
var html = '<div>Your choice is "' + $('#getIcon').asIconPicker('get') + '"</div>';
$(html).prependTo($('#api-get-info'));
return false;
});
});
<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">
<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>
<h3>Get()</h3>
<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>
<button id="api-get-click">getIcon</button>
</div>
<div class="example" id="api-get-info"></div>
</section>
null
您正在元素上使用jquery-asIconPicker插件...而且插件似乎没有内置的
change
事件。因此您可以简单地为单击事件侦听器使用另一个选择器:.asiconpicker-list
。
非常短的setTimeout将确保在进行选择后应用.asiconpicker('get')
方法。
如果页面中只有一个插件实例,这将会很好地工作。
null
$(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">
<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>
<h3>Get()</h3>
<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>