Jquery show selected a value from a dropdown

Question

I have a code that is used to select certain elements, the code works great when you click on the geticon button and it shows the right option value. The problem is I am not sure how to show the selected option value onSelect of the dropdown (instead of the button).

Here is my Jsfiddle

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

Answer 1

You are using the jquery-asIconPicker plugin on the <select> element... and the plugin does not seem to have a built-in change event. So you can simply use another selector for your click event listener: .asIconPicker-list.

A very short setTimeout will make sure that the method .asIconPicker('get') is applied after the selection is made.

That will work fine if there is only one instance of the plugin in the page.

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