從jQuery 1.5.1升級select元素以使用jQuery 1.9.1？

我想使用一個選擇的表單元素，使用jQuery 1.5.1，但我使用它的環境設置爲使用jQuery 1.9.1，我的選擇框完全消失。我如何更改此代碼以使用1.9.1？從jQuery 1.5.1升級select元素以使用jQuery 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'); 
}); 
});

來源

2013-07-11 Justice Gödel Conder

確保您已經在該jsFiddle的「框架和擴展」選項卡上選擇了jQuery 1.9.1。 – DevlshOne

腳本標記是用jsFiddles html面板編寫的，所以它可以很容易地爲了測試目的而改變。 –

包括jQuery遷移，或用替換替換折舊方法。（包括jQuery的遷移應該提示您正在使用哪些已折舊/已刪除的方法） –

心中已經收到到目前爲止最好的回饋：創建DOM對象時

使用類，而不是類名。
獲取所選選項的索引時，請使用select.prop（）而不是select.attr（）。

感謝您的幫助！

來源

2013-07-11 17:24:48

從jQuery 1.5.1升級select元素以使用jQuery 1.9.1？

回答

相關問題