title: How to display <img> tag using javascript as the active text
body: <p>I want to display the icons for <code>&lt;li&gt;</code> tags instead of the text when it's selected. Please take a look: <a href="http://jsfiddle.net/Zenko/PUAY7/4/" rel="nofollow">http://jsfiddle.net/Zenko/PUAY7/4/</a></p>
  
  <p><strong>Update:</strong> Solution fixed: <a href="http://jsfiddle.net/Zenko/PUAY7/12/" rel="nofollow">http://jsfiddle.net/Zenko/PUAY7/12/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;section class="main"&gt;
  &lt;div class="wrapper-demo"&gt;
      &lt;div id="dd" class="wrapper-dropdown-3" tabindex="1"&gt;
          &lt;span&gt;Transport&lt;/span&gt;
          &lt;ul class="dropdown"&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;img src="https://cdn1.iconfinder.com/data/icons/finalflags/16/United-States-Flag.png" /&gt;classic mail&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;UPS Delivery&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Private jet&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>function DropDown(el) {
      this.dd = el;
      this.placeholder = this.dd.children('span');
      this.opts = this.dd.find('ul.dropdown &gt; li &gt; a');
      this.val = '';
      this.index = -1;
      this.initEvents();
  }
  DropDown.prototype = {
      initEvents : function() {
          var obj = this;
  
          obj.dd.on('click', function(event){
              $(this).toggleClass('active');
              return false;
          });
  
          obj.opts.on('click',function(){
              var opt = $(this);
              obj.val = opt.text();
              obj.index = opt.index();
              obj.placeholder.text(obj.val);
          });
      },
      getValue : function() {
          return this.val;
      },
      getIndex : function() {
          return this.index;
      }
  }
  
  $(function() {
  
      var dd = new DropDown( $('#dd') );
  
      $(document).click(function() {
          // all dropdowns
          $('.wrapper-dropdown-3').removeClass('active');
      });
  
  });
  </code></pre>
  
  <p>If you look at my jsfiddle you can see the flag icon is not being displayed when item is selected. Any help would be very much appreciated.</p>