Виды SELECT

В данном уроке я расскажу и покажу Вам, как можно реализовать альтернативу такому элементу формы, как select. Для создания «нового» элемента формы мы будем использовать jQuery, что, безусловно, больше нагружает браузер, чем использование стандартных элементов, поэтому я не рекомендую использовать данный метод, если стандартный внешний вид SELECT Вас вполне устраивает. Кстати, имеется еще один интересный JQuery плагин SelectBoxIt, с помощью которого, можно сделать очень красивый внешний вид SELECT.

Основным управляющим элементом нашего скрипта выступит тег button, который будет использоваться как для развертывания списка, так и для выбора конкретного пункта. HTML структура, которую я использовал для примера приведена ниже.

<form>
<input name="lang" value="ru">
<div id="first">
<button class="select" value="ru">
<span class="label">
Язык:
</span>
<span class="button-content">
Русский
</span>
<img class="button-arrow" src="img/arrow.gif">
</button>
<div>
<ul>
<li>
<button class="option" data-value="en">
<span class="button-content">
English
</span>
</button>
</li>
<li>
<button class="option active" data-value="ru">
<span class="button-content">
Русский
</span>
</button>
</li>
<li>
<button class="option" data-value="ua">
<span class="button-content">
Українська
</span>
</button>
</li>
</ul>
</div>
</div>
</form>

Как видите, структура получается куда более насыщенной, чем при использовании тега select, что делает ее более модифицируемой.

СSS стили, которые использовал я указаны ниже, но к ним нет никаких конкретных правил, так что Вы можете написать абсолютно другие стили.

#first{
         width:250px;
         height:150px;
         float:left;
         background-color:#F1F1F1;
}

button{
         font-size:12px;
}

button:focus{
         outline:none;
}

.select{
         margin:15px 0 10px 30px;
         padding:5px 12px;
         border-radius:2px;
         border:1px solid #d3d3d3;
         background:#f8f8f8;
         color:#333;
         box-shadow:0 1px 0 rgba(0,0,0,0.05);
}

.select:hover{
         background-color:#EEE;
         cursor:pointer;
}

.select.active{
         border-color:#c6c6c6;
         background:#e9e9e9;
         box-shadow:inset 0 1px 0 #ddd;
}

#first .select .button-content{
         font-weight:600;
}

.select .button-arrow{
         margin-top:-2px;
         margin-left:5px;
         border:1px solid transparent;
         border-top-color:#333;
         border-width:4px 4px 0;
         width:0;
         height:0;
         vertical-align:middle;
}

#first div{
         margin:0 30px;
         overflow:hidden;
         background:#FFF;
         display:none;
}

#first div.show{
         display:block;
}

#first li{
         margin:5px 10px;
}

.option{
         border:none;
         background:none;
         color:#00F;
         font-size:11px;
}

.option:hover{
         text-decoration:underline;
         cursor:pointer;
}

.option.active{
         color:#000;
         font-weight:600;
}

.option.active:hover{
         text-decoration:none;
}

Теперь приступим к самой важной, и в тоже время к самой сложной части нашего урока – jQuery-скрипт. Необходимый нам код состоит из двух событий: нажатие на кнопку «выбора» и нажатие на пункт списка для произведения того самого выбора. При срабатывании первого события происходит развертывание/сворачивание списка за счет добавления/удаления класса «show»:

$(".select").on("click", function(event){
         event.preventDefault();
         $(this).toggleClass("active");
         $(this).parent().find("div").toggleClass("show");
});

Второе событие уже несколько сложнее:

$("#first .option").on("click", function(event){
         event.preventDefault();

         // Выделение выбранного элемента
         $("#first .option").removeClass("active");
         $(this).addClass("active");

         var selector = $("#first .select");

         // Замена подписи на кнопке отображения вариантов
         selector.find(".button-content").text($(this).text());

         // Приведение нашего select-a в исходное (скрытое) состояние
         selector.toggleClass("active");
         $("#first div").toggleClass("show");

         // изменение значения на выбранное
         $("#lang").attr("value", $(this).data("value"));
});

Как Вы могли заметить, при выборе конкретного варианта, его значение записывается в скрытое поле формы. Это необходимо для передачи данных PHP скрипту, так как данные из кнопок, которые мы используем, передадутся только при нажатии на конкретную кнопку, что нам не подходит, так как за пользователем должна оставаться возможность продолжить заполнение формы. Для того, чтобы избежать несвоевременную передачу данных, в обоих событиях мы использовали  функцию preventDefault.

Если же данные отправляются асинхронно, то использовать скрытое поле вовсе не обязательно, данные можно обрабатывать прямо в событии или иным образом.

На этом урок завершен. Благодарю за проявленное внимание!