Замена <select> списком, - больше одного не работают.
Нужна помощь профессионалов, - заставить работать все селекты на странице (скрипт меняет <select><option></option></select> на список).
html: <form method="post" action=""> <select name="fancySelect" class="makeMeFancy"> <option value="0" selected="selected" data-skip="Один">Один</option> <option value="1" data-html-text="Два">Два</option> <option value="2" data-html-text="Три">Три</option> </select> <select name="fancySelect2" class="makeMeFancy"> <option value="0" selected="selected" data-skip="Один">Один</option> <option value="1" data-html-text="Два">Два</option> <option value="2" data-html-text="Три">Три</option> </select> </form> javascript: $(document).ready(function(){ // Элемент select, который будет замещаться: var select = $('select.makeMeFancy'); var selectBoxContainer = $('<div>',{ width : select.outerWidth(), className : 'tzSelect', html : '<div class="selectBox"></div>' }); var dropDown = $('<ul>',{className:'dropDown'}); var selectBox = selectBoxContainer.find('.selectBox'); // Цикл по оригинальному элементу select select.find('option').each(function(i){ var option = $(this); if(i==select.attr('selectedIndex')){ selectBox.html(option.text()); } // доступ к атрибутам данных HTML5 с помощью метода data(). if(option.data('skip')){ return true; } // Создаем выпадающий пункт в соответствии // с атрибутами HTML5 данных: var li = $('<li>',{ html: '<span>'+ option.data('html-text')+'</span>' }); li.click(function(){ selectBox.html(option.text()); dropDown.trigger('hide'); // Когда происходит событие click, мы также отражаем // изменения в оригинальном элементе select: select.val(option.val()); return false; }); dropDown.append(li); }); selectBoxContainer.append(dropDown.hide()); select.hide().after(selectBoxContainer); // Привязываем пользовательские события show и hide к элементу 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.slideUp(); }).bind('toggle',function(){ if(selectBox.hasClass('expanded')){ dropDown.trigger('hide'); } else dropDown.trigger('show'); }); selectBox.click(function(){ dropDown.trigger('toggle'); return false; }); // Если нажать кнопку мыши где-нибудь на странице при открытом элементе dropDown, // он будет спрятан: $(document).click(function(){ dropDown.trigger('hide'); }); }); Спасибо заранее! |
Часовой пояс GMT +3, время: 08:47. |