Upgrade select element from jQuery 1.5.1 to work with jQuery 1.9.1? -


i trying use select form-element has been made using jquery 1.5.1 environment i'm using in setup use jquery 1.9.1 , select box disappears. how can change code work 1.9.1?

change linked jquery library version number 1.5.1 1.9.1 see mean.

fiddle: http://jsfiddle.net/binaryacid/6n2tn/1/ pen: http://codepen.io/justice-conder/pen/ubihy

$(document).ready(function() { var select = $('select.prettyfied');  var selectboxcontainer = $('<div>',{ width     : select.outerwidth(), classname : 'prettyfied-select', html      : '<div class="prettyfied-select-box"><span></span></div>' });  var dropdown = $('<ul>',{classname:'dropdown'}); var selectbox = selectboxcontainer.find('.prettyfied-select-box');  // looping though options of original select element select.find('option').each(function(i) { var option = $(this); if(i == select.attr('selectedindex')) {   selectbox.html('<span>'+option.text()+'</span>'); }  // access html5 data attributes data method if(!option.data('html-text')) {   return true; }  // create dropdown item according data-icon & data-html-text attributes var li = $('<li>',{   html: '<span>' + option.data('html-text') + '</span>' });  li.click(function() {   selectbox.html('<span>'+option.text()+'</span>');   dropdown.trigger('hide');  // when click occurs, reflect change on original select element   select.val(option.val());    return false; }).hover(function() {   $(this).addclass('hover'); }, function() {   $(this).removeclass('hover'); });  dropdown.append(li); });  selectboxcontainer.append(dropdown.hide()); select.hide().after(selectboxcontainer);  // binding custom show/hide events on 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.addclass('is-hidden'); dropdown.slideup(function() {   dropdown.removeclass('is-hidden'); }); }).bind('toggle',function() { if(selectbox.hasclass('expanded')) {   dropdown.trigger('hide'); } else dropdown.trigger('show'); });  selectbox.click(function() { dropdown.trigger('toggle'); return false; });  // click on page, while dropdown shown, close $(document).click(function(){ dropdown.trigger('hide'); }); });

best feedback i'v received far:

  1. use class instead of classname when creating dom object.
  2. use select.prop() instead of select.attr() when getting index of selected option.

thanks help!


Comments

Post a Comment