0

我正在尝试使用使用 jQuery 1.5.1 制作的选择表单元素，但我使用它的环境设置为使用 jQuery 1.9.1，我的选择框完全消失了。如何更改此代码以使用 1.9.1？

将链接的 jQuery 库版本号从 1.5.1 更改为 1.9.1 以了解我的意思。

小提琴： http: //jsfiddle.net/BinaryAcid/6n2tn/1/ 笔：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');
});
});
4

1 回答 1

0

迄今为止我收到的最佳反馈：

  1. 创建 DOM 对象时使用 class 而不是 className。
  2. 获取所选选项的索引时，使用 select.prop() 而不是 select.attr()。

感谢所有的帮助！

于 2013-07-11T17:24:48.443 回答