title: Dropdown Value selected not changing when option selected changes Java Script
body: <p>Following is Html for Drop down</p>
  
  <pre><code>&lt;select name="fancySelect" onchange="test()" class="makeMeFancy" id="drop1"&gt;
              &lt;option value="0" selected="selected" data-skip="1" data-icon="assets/images/large/bitcoin.png" data-html-text="BTC&amp;lt;i&amp;gt"&gt;BTC&lt;span class="select_coin_button_arrow"&gt;▾&lt;/span&gt;&lt;/option&gt;
              &lt;option value="1" data-icon="assets/images/small/bitcoin.png" data-html-text="BTC&amp;lt;i&amp;gt" &gt;BTC&lt;/option&gt;
              &lt;option value="17" data-icon="assets/images/small/ether.png" data-html-text="ETH&amp;lt;i&amp;gt;"&gt;ETH&lt;/option&gt;  
  &lt;/select&gt;
  </code></pre>
  
  <p>and following is js function test()</p>
  
  <pre><code>function test() {           
      var e = document.getElementById("drop1");
      var strUser = e.options[e.selectedIndex].value;
      console.dir(strUser)
  }
  </code></pre>
  
  <p>How to Print </p>
  
  <p>Follwing is Jquery Script working on Dropdown </p>
  
  <p>As code is working without Jquery Script,There seems to be problem 
  in following JQuery</p>
  
  <pre><code>$(document).ready(function () {
  
      // The select element to be replaced:
      var select = $('select.makeMeFancy');
  
      var selectBoxContainer = $('&lt;div&gt;', {
          width: select.outerWidth(),
          className: 'tzSelect',
          html: '&lt;div class="selectBox"&gt;&lt;/div&gt;'
      });
  
      var dropDown = $('&lt;ul&gt;', {className: 'dropDown'});
      var selectBox = selectBoxContainer.find('.selectBox');
  
      // Looping though the options of the original select element
  
      select.find('option').each(function (i) {
          var option = $(this);
  
          if (i == select.attr('selectedIndex')) {
              selectBox.html(option.text());
          }
  
          // As of jQuery 1.4.3 we can access HTML5 
          // data attributes with the data() method.
  
          if (option.data('skip')) {
              return true;
          }
  
          // Creating a dropdown item according to the
          // data-icon and data-html-text HTML5 attributes:
  
          var li = $('&lt;li&gt;', {
  
              html: '&lt;img src="' + option.data('icon') + '" /&gt;&lt;span&gt;' +
              option.data('html-text') + '&lt;/span&gt;'
          });
  
          li.click(function () {
  
              selectBox.html(option.text());
              dropDown.trigger('hide');
  
              // When a click occurs, we are also reflecting
              // the change on the original select element:
              select.val(option.val());
              return false;
          });
  
          dropDown.append(li);
      });
  
      selectBoxContainer.append(dropDown.hide());
      select.hide().after(selectBoxContainer);
  
      // Binding custom show and hide events on the dropDown:
  
      dropDown.bind('show', function () {
  
          if (dropDown.is(':animated')) {
              return false;
          }
  
          selectBox.addClass('expanded');
          dropDown.slideDown();
  
      }).bind('hide', function () {
  
          if (dropDown.is(':animated')) {
              return false;
          }
  
          selectBox.removeClass('expanded');
          dropDown.slideUp();
  
      }).bind('toggle', function () {
          if (selectBox.hasClass('expanded')) {
              dropDown.trigger('hide');
  
          }
          else dropDown.trigger('show');
      });
  
      selectBox.click(function () {
          dropDown.trigger('toggle');
          return false;
      });
  
      // If we click anywhere on the page, while the
      // dropdown is shown, it is going to be hidden:
  
      $(document).click(function () {
          dropDown.trigger('hide');
  
  
      });
  });
  
  
  $(document).ready(function () {
  
      // The select element to be replaced:
      var select = $('select.makeMeFancydrop');
  
      var selectBoxContainer = $('&lt;div&gt;', {
          width: select.outerWidth(),
          className: 'tzSelect',
          html: '&lt;div class="selectBox"&gt;&lt;/div&gt;'
      });
  
      var dropDown = $('&lt;ul&gt;', {className: 'dropDown'});
      var selectBox = selectBoxContainer.find('.selectBox');
  
      // Looping though the options of the original select element
  
      select.find('option').each(function (i) {
          var option = $(this);
  
          if (i == select.attr('selectedIndex')) {
              selectBox.html(option.text());
          }
  
          // As of jQuery 1.4.3 we can access HTML5 
          // data attributes with the data() method.
  
          if (option.data('skip')) {
              return true;
          }
  
          // Creating a dropdown item according to the
          // data-icon and data-html-text HTML5 attributes:
  
          var li = $('&lt;li&gt;', {
              html: '&lt;img src="' + option.data('icon') + '" /&gt;&lt;span&gt;' +
              option.data('html-text') + '&lt;/span&gt;'
          });
  
          li.click(function () {
  
              selectBox.html(option.text());
              dropDown.trigger('hide');
  
              // When a click occurs, we are also reflecting
              // the change on the original select element:
              select.val(option.val());
              return false;
          });
  
          dropDown.append(li);
      });
  
      selectBoxContainer.append(dropDown.hide());
      select.hide().after(selectBoxContainer);
  
      // Binding custom show and hide events on the dropDown:
  
      dropDown.bind('show', function () {
  
          if (dropDown.is(':animated')) {
              return false;
          }
  
          selectBox.addClass('expanded');
          dropDown.slideDown();
  
      }).bind('hide', function () {
  
          if (dropDown.is(':animated')) {
              return false;
          }
  
          selectBox.removeClass('expanded');
          dropDown.slideUp();
  
      }).bind('toggle', function () {
          if (selectBox.hasClass('expanded')) {
              dropDown.trigger('hide');
          }
          else dropDown.trigger('show');
      });
  
      selectBox.click(function () {
          dropDown.trigger('toggle');
          return false;
      });
  
      // If we click anywhere on the page, while the
      // dropdown is shown, it is going to be hidden:
  
      $(document).click(function () {
          dropDown.trigger('hide');
      });
  });
  
  
  $(document).ready(function () {
      $("#drop1").click(function () {
  
      });
  });
  </code></pre>