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>

check out this https://stackoverflow.com/questions/11179406/jquery-get-value-of-select-onchange — edisonthk, Apr 24 '21 at 11:17

Louys Patrice Bessette · Accepted Answer · 2021-04-24T15:29:02.920

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>

If we can search any icon and select any icon then it's not working. what is the issue with this. — david.adam, May 27 '21 at 18:10
I don't understand that. I suggest you to open a new question specifically about this, with your current code. — Louys Patrice Bessette, May 29 '21 at 19:48

Jquery show selected a value from a dropdown

1 Answers1