function selectmodel(){ var $box = $('div.model-select-box'); var $option = $('ul.model-select-option', $box); var $txt = $('div.model-select-text', $box); var speed = 10; /* * 当机某个下拉列表时,显示当前下拉列表的下拉列表框 * 并隐藏页面中其他下拉列表 */ $txt.click(function(e) { $option.not($(this).siblings('ul.model-select-option')).slideup(speed, function(){ int($(this)); }); $(this).siblings('ul.model-select-option').slidetoggle(speed, function(){ int($(this)); }); return false; }); //点击选择,关闭其他下拉 /* * 为每个下拉列表框中的选项设置默认选中标识 data-selected * 点击下拉列表框中的选项时,将选项的 data-option 属性的属性值赋给下拉列表的 data-value 属性,并改变默认选中标识 data-selected * 为选项添加 mouseover 事件 */ $option.find('li') .each(function(index, element) { if($(this).hasclass('seleced')){ $(this).addclass('data-selected'); } }) .mousedown(function(){ //赋值操作 $(this).parent().siblings('div.model-select-text').html($(this).html()) .attr('data-value', $(this).attr('data-option')); $option.slideup(speed, function(){ int($(this)); }); $(this).addclass('seleced data-selected').siblings('li').removeclass('seleced data-selected'); return false; }) .mouseover(function(){ $(this).addclass('seleced').siblings('li').removeclass('seleced'); }); //点击文档,隐藏所有下拉 $(document).click(function(e) { $option.slideup(speed, function(){ int($(this)); }); }); //初始化默认选择 function int(obj){ obj.find('li.data-selected').addclass('seleced').siblings('li').removeclass('seleced'); } } $(function(){ selectmodel(); })