我用 jquery 创建了自定义选择下拉菜单。当一个选择框出现时,它工作得很好......但是当两个选择框出现在同一页面上时,一切都会崩溃,只有最后一个选择元素可以正常工作,但它。
适用于其中的代码:
$(document).ready(function(){
var select = $('select.selectForm');
var selectBoxContainer = $('<div>',{
"class" : 'selectContainer',
html : '<div class="selectBox"></div>'
});
var dropDown = $('<ul>',{
"class" : 'selectDropDown'
});
var selectBox = selectBoxContainer.find('.selectBox');
//Loop though the options of the original select element
select.find('option').each(function(i){
var option = $(this);
//sets default text to first option in the select
if( i !== select.prop("selectedIndex") ){
selectBox.html( option.text() );
}
if( option.data('skip') ){
return true;
}
//Creating a dropdown list from the items in out select element using the option text
var li = $('<li>',{
html : option.text()
});
li.on("click",function(){
selectBox.html( option.text() );
dropDown.trigger('hide'); //might be dropDown.trigger('hide');
//also change the original select element
select.val( option.val() );
return false;
});
//add list item to the dropdown menu
dropDown.append(li);
});//end of select find
//Adding dropdown to DOM
selectBoxContainer.append(dropDown.hide()); //adding dropDown ul to DOM within the selectContainer div
select.hide().after(selectBoxContainer); //Hides original select element and inserts ul containder after it
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.slideUp();
}).bind('toggle',function(){
if(selectBox.hasClass('expanded')){
dropDown.trigger('hide');
} else{
dropDown.trigger('show');
}
});
selectBox.on('click',function(){
dropDown.trigger('toggle');
return false;
});
$(document).on("click",function(){
dropDown.trigger('hide');
});
});//document ready end
它是如何工作的:http: //jsfiddle.net/im_cr/TyPSX/
它是如何与两个分开的:http: //jsfiddle.net/im_cr/TyPSX/5/
任何帮助表示赞赏。