从jQuery 1.5.1升级选择元素以使用jQuery 1.9.1？

Question

I am trying to use a select form-element that has been made using jQuery 1.5.1 but the environment that I'm using it in is setup to use jQuery 1.9.1 and my select box completely disappears. How can I change this code to work with 1.9.1?

Change the linked jQuery library version number from 1.5.1 to 1.9.1 to see exactly what I 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 with the data method
if(!option.data('html-text')) {
  return true;
}

// Create dropdown item according to 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, we 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 the dropdown is shown, to close it
$(document).click(function(){
dropDown.trigger('hide');
});
});

Answer 1

Best feedback I'v received so far:

1. Use class instead of className when creating the DOM object.
2. Use select.prop() instead of select.attr() when getting the index of the selected option.

Thanks for all the help!