提问者:小点点

Jquery显示从下拉列表中选择的值


我有一个用来选择某些元素的代码,当你点击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


共1个答案

匿名用户

您正在