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 オブジェクトを作成するときは、className の代わりに class を使用します。
  2. 選択したオプションのインデックスを取得するときは、select.attr() の代わりに select.prop() を使用します。

助けてくれてありがとう！

于 2013-07-11T17:24:48.443 に答える