Question

我正在尝试使用jQuery 1.5.1创建的select form元素，但我正在使用它的环境设置为使用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');
});
});

Answer 1

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

创建DOM对象时使用class而不是className。
获取所选选项的索引时，请使用select.prop（）而不是select.attr（）。

感谢您的帮助！

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

1 个答案: