.jpg)
июня 3, 2010 | by Макс | Очень часто при создании сайтов встречаются такие формы, которые содержат в себе очень много полей и часть из этих может быть по умолчанию скрыта. Наша задача сделать так, чтоб при выборе определенного пункта нам показывалось дополнительное поле. Для реализации этого простенького скрипта мы будем использовать библиотеку jQuery. Сам по себе скрипт очень простой, а html структура элементарная. Поэтому ограничусь лишь приведением листинга кода и работающим примером… html структура My name:
My email address:
Select ‘Other’ from this dropdown list: Select… Item 1 Item 2 Item 3 Other This is my other option:
jQuery код $(document).ready(function() { $.viewInput = { ‘0′ : $([]), //THIS IS THE NAME OF THE DIV WRAPPING THE HIDDEN FIELD ‘otherField’ : $(‘#otherField’), }; $(‘#otherFieldOption’).change(function() { // HIDES THE INPUT FIELD IF ANOTHER DROPDOWN ITEM IS SELECTED ONCE THE HIDDEN FIELD IS LOADED $.each($.viewInput, function() { this. hide(); }); // SHOWS THE INPUT FIELD ITEM IF SELECTED $.viewInput[$(this).val()].show(); }); }); css стили Ну и напоследок приукрасим нашу форму с помощью css стилей: /* SET THE HIDDEN INPUT FIELD IN A DIV */ #otherField { display: none; } /* FORM */ fieldset { width: 290px; margin: 0; padding: 20px; background: #f4f4f4; border: 1px solid #ddd; } label { display: block; font: bold 1.0em arial, verdana, tahoma, sans-serif; color: #444; margin: 0 20px 10px 0; padding: 0; clear: left; } .textfield, .dropdown { width: 200px; font: normal 1.0em arial, verdana, tahoma, sans-serif; color: #666; margin: 0 0 20px 0; padding: 5px 6px; background: #fff; border: 1px solid #ddd; } .dropdown { width: 215px; } input:focus, select:focus { border: 1px solid #ccc; } .btn, .btn:focus { display: block; font: bold 1.0em arial, verdana, tahoma, sans-serif; color: #333; text-decoration: none; margin: 0; padding: 3px 5px; } Вот собственно говоря и все. Пользуйтесь. h++p://tutsvalley. ru/js/jquery/jquery-hidden-form-input. html Теги: jQuery