Ref-sgain.ru

Программы и сервисы
3 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как скрыть ранее использованные элементы в выпадающем списке?

ITGuides.ru

Вопросы и ответы в сфере it технологий и настройке ПК

Пошаговое руководство по созданию выпадающих списков в Excel

Если вы хотите облегчить ввод информации при работе с Microsoft Excel или ограничить ввод определенными элементами, вы можете создать выпадающий список. В Excel можно создать выпадающий список из всех заполненных ячеек. Когда вы создаете такой список, в ячейках появляется стрелка. Чтобы ввести что-либо в это поле, нажмите на стрелку, а затем введите нужную информацию.

Видео по связанным выпадающим спискам Excel

Как сделать выпадающий список?

Пример готового выпадающего списка в Excel

Пример раскрывающегося списка в Excel

Использование выпадающего списка в Excel очень удобно при работе с базами данных или большими таблицами, поскольку эта технология позволяет выбирать только те значения, которые уже были выбраны ранее. Кроме того, выпадающий список предотвращает ситуации, когда вводится неверная информация, что может привести к нежелательным результатам. По этой причине разработчики Microsoft Excel добавили инструменты проверки данных, которые включают создание выпадающих списков.

Самый важный вопрос — как составить список? Допустим, пользователь постоянно использует базу данных в своей работе. Чтобы не заполнять каждый раз, например, детали одного и того же товара, можно просто создать выпадающий список. Его можно разместить на другом листе Excel или в нескольких столбцах рядом с основной таблицей.

Чтобы создать раскрывающийся список, выполните следующие действия.

    .
  1. В поле, где указывается имя ячейки (A1 или B2), необходимо написать другое название (например, «товары»).
  2. Кликнуть в панели меню пункты «Данные — Проверка».
  3. В появившемся окне надо заполнить информацию на вкладке «Параметры»: в пункте «Тип данных» указать «Список», а в пункте «Источник» — название ячеек (=товары).
  4. Нажать кнопку «ОК».

Задаем дополнительные параметры выпадающих списков

Определите дополнительные параметры для выпадающих списков

По желанию можно еще заполнить 2 оставшиеся вкладки — «Сообщение для ввода» и «Сообщение об ошибке». На первой вкладке можно написать подсказку для других пользователей о том, что надо делать. То есть в заголовок можно написать «Подсказка», а в поле «Сообщение» — небольшую инструкцию (например, «выберите нужный товар»). Теперь, если щелкнуть на определенное поле, то можно увидеть всплывающее сообщение, которое будет выглядеть примерно так: «Подсказка: выберите нужный товар».

На второй вкладке можно аналогичным образом создать предупреждение, которое появляется при неправильной записи. Также можно выбрать тип ошибки:

  • «останов» — программа сообщит об ошибке и не разрешит ввести ошибочные данные;
  • «предупреждение» — программа сообщит об ошибке, но пользователь сможет сам решить, сохранять или нет эту информацию;
  • «сообщение» — стандартное сообщение.
Читайте так же:
Как сделать, чтобы в группе флажков в Excel был выбран только один флажок?

Даже если не возникает конкретной ошибки, программа все равно будет отображать текущую версию.

Вот и все — первый выпадающий список Excel был успешно создан. Теперь при выборе определенного поля будет появляться подсказка, а также перечень товаров. Если же пользователь введет несоответствующие данные (например, число), то появится сообщение об ошибке.

Для удобства выпадающий список можно разместить на одном листе, а саму таблицу — на другом. Например, на первом листе можно создать прайс-лист, а на другом — выбирать нужный вид товара. Но для создания такого перечня нужно будет задать ему имя. Для этого надо выделить нужные поля, щелкнуть по ним правой кнопкой мыши и выбрать пункт «Имя диапазона». В появившемся окне в пункте «Имя» нужно указать название для этих ячеек без пробелов (например, «Перечень_изделий»). После этого надо скопировать диапазон ячеек, а затем перейти на другой лист и кликнуть по пунктам «Данные — Проверка». В новом поле нужно указать «Тип данных» (как обычно), а в поле «Источник» — вставить ранее скопированную информацию. Теперь вы знаете, как сделать раскрывающийся список, даже если перечень изделий находится на другом листе.

Создание одного списка на основании другого

Готовый пример связанного выпадающего списка Excel

Готовый пример связанного раскрывающегося списка в Excel

Предположим, у вас есть база данных автомобилей, в которой указаны марка и детали автомобиля. И вы хотите, чтобы выбор запчастей был структурирован по названию автомобиля. Это можно сделать с помощью функции dVSSYL.

Сначала нужно дать имя ячейкам («auto») и написать марку автомобиля (например, Audi, Renault, Nissan). Чуть ниже следует написать названия деталей и дать название полям. Nissan и т.д. должны быть озаглавлены поля с запчастями Nissan.

После этого можно перейти к созданию одного выпадающего перечня на основе другого. Таблица должна состоять из 2 колонок: марка авто и запчасти. Первый столбец делается по знакомому уже принципу: «Данные — Проверка», в качестве источника указывается перечень автомобилей. Теперь можно перейти ко второму столбцу — «Запчасти». Здесь тоже надо щелкнуть в панели меню пункты «Данные — Проверка», но в поле «Источник» нужно написать следующее: =ДВССЫЛ(A5). А5 — это название поля, в котором указан автомобиль из колонки «Марка авто». После того как в первом столбце будет указана марка, во втором столбце можно будет выбрать только те детали, которые подходят к конкретной машине.

Читайте так же:
Как скопировать настройку страницы Excel на другие листы в Excel?

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

Выпадающий список HTML: учимся создавать и задавать стили с помощью CSS

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

Текст, видимый пользователю, может отличаться от текста, указанного в атрибуте value. Чтобы создать выпадающий список:

  • Выпадающий список создается с помощью тега ;
  • Внутри тега с помощью тега определяются параметры

Также можно указать CSS-класс вместо использования идентификатора для задания стиля раскрывающегося списка.

В следующем разделе я покажу примеры использования HTML выпадающего списка в JavaScript / JQuery . В примерах также будет показано, как задать стили с помощью CSS / CSS3 и фреймворка Bootstrap.

Как создать раскрывающийся список HTML — пример

В этом примере используется опция выбора HTML для создания выпадающего списка HTML с тремя вариантами:

Как создать раскрывающийся список HTML - пример

Просмотр онлайн демо-версии и кода

В приведенном выше примере для создания выпадающего списка используется следующая схема:

Использование атрибута value

Как упоминалось выше, атрибут value может отличаться от текста, отображаемого на странице. Например, можно отображать названия стран или цвета пользователей и использовать короткие коды в атрибуте value.

На следующем примере мы создадим раскрывающийся список со значениями:

Использование атрибута value

Смотрите онлайн демонстрацию и код

В метке был использован следующий код:

Пример получения доступа к выбранному варианту в JavaScript

Давайте создадим простой пример того, как получить доступ к значению выбранной опции и выполнить некоторые действия. Как и в примере выше, мы создадим тот же список, но с опциями цвета. Цвет будет применен к документу после нажатия кнопки:

Пример получения доступа к выбранному варианту в JavaScript

Просмотр демо-версии и кода онлайн

Используя следующий код, вы можете отобразить значения опций:

Эта строка кода используется в JavaScript для получения значения атрибута variant value:

При нажатии на кнопку вызывается функция JS, которая присваивает выбранное значение в выпадающем списке переменной. Значение этого типа используется для установки цвета документа.

Получение доступа к видимому тексту в JQuery

Используя JQuery, я получу как значение, так и текст выбранной опции. В этом демонстрационном примере я получу доступ к видимому тексту в теге option следующим образом:

Получение доступа к видимому тексту в JQuery

Смотрите демо-версию и код в Интернете

Читайте так же:
Как скопировать заголовки строк и столбцов в Excel?

В коде значение каждой опции в метке отличается от текста. После выбора цвета jQuery отображает видимый текст в предупреждении. Код этикетки выглядит следующим образом:

Вот как к этому значению обращаются в HTML-выборе опции выбранного JavaScript :

С помощью метода $.val() JQuery вы также можете просмотреть значение:

Если вы замените эту строку в примере выше, код будет отображать значение shortcode/color в атрибуте value вместо видимого текста.

Пример получения значения в скрипте PHP

В этом примере форма создана с использованием метки в разделе разметки для получения значения опции, выбранной в выпадающем списке. После выбора цвета из выпадающего списка нажмите кнопку «Отправить». Данные формы будут переданы в тот же PHP-файл, и выбранный цвет будет отображен:

Пример получения значения в скрипте PHP

Смотрите онлайн демо-версию и код.

Метод формы, используемый в примере — POST , поэтому можно получить значения формы с помощью массива PHP $_POST[“”] . Это код формы, используемый в примере:

А вот как PHP-скрипт используется для получения значения опции выбора HTML :

Если форма имеет метод GET, используйте массив PHP $_GET[«»].

Определение стилей выпадающего списка с помощью CSS

Теперь давайте посмотрим, как определить стили выпадающего списка с помощью свойств CSS. В следующей демонстрации я использовал несколько простых свойств CSS и свойства градиента CSS3:

Определение стилей выпадающего списка с помощью CSS

Смотрите демонстрацию и код онлайн

Это пример использования box-shadow и linear-gradient. В качестве примера здесь приведен код CSS:

Закругленные углы с помощью свойства border-radius

Используя свойство CSS3 border-radius, мы создали закругленные углы для опции выбора HTML. Также была изменена цветовая схема. Вы можете сами экспериментировать с размером границы, шириной, отступом и другими свойствами:

Закругленные углы с помощью свойства border-radius

Смотрите онлайн демонстрацию и код

Использование нескольких атрибутов и стилей CSS

Чтобы позволить пользователям выбирать несколько вариантов из списка, необходимо использовать атрибут multiple. В приведенном выше примере доступен только один вариант. При использовании атрибута multiple можно выбрать несколько вариантов, нажав клавишу CTRL:

Использование нескольких атрибутов и стилей CSS

Смотрите онлайн-демонстрацию и код

Использование фреймворка Bootstrap и плагинов для создания красивых выпадающих списков

Когда вы используете фреймворк Bootstrap, вы можете создавать крутые HTML-варианты с помощью плагинов.

Один из таких плагинов — Bootstrap-Select . Он добавляет для выпадающего списка полезные функции. Например, можно выполнить поиск значения, вводя текст в поле. Это особенно полезно, если в выпадающем списке много вариантов.

Кроме того, все выбранные варианты помечаются, а с помощью атрибута «multiple» можно задать ограничение на количество выбранных вариантов.

Читайте так же:
Как создать круговую диаграмму для ответов ДА / НЕТ в Excel?

В показанной демонстрации пользователь может выбрать два варианта из списка:

Использование фреймворка Bootstrap и плагинов для создания красивых выпадающих списков

Смотрите демо-версию и код онлайн

Демо-версия выпадающего списка с опцией поиска

Используя тот же плагин, вы можете позволить пользователям искать опции в списке опций HTML:

Демо-версия выпадающего списка с опцией поиска

Смотрите демонстрацию и код онлайн

Пожалуйста, оставляйте свои комментарии по текущей теме материала. Мы очень ценим ваши комментарии, мнения, симпатии, антипатии и подписки.

Стильный выпадающий список на CSS Стильный выпадающий список на CSS

На каждом сайте можно найти выпадающее меню. В этом случае элементы на сайте по умолчанию скрыты; пользователь должен нажать на элемент, чтобы увидеть, например, полный список. Чаще всего такие элементы дизайна скучны и однообразны, что не привлекает взгляд посетителя, тем самым теряются ценные клики сайта. В этом уроке мы рассмотрим, как можно стилизовать выпадающий список с помощью различных эффектов.

Плавная анимация доступна только в последних версиях браузеров. Также было добавлено несколько строк JavaScript для правильного отображения. Итак, давайте начнем.

Шаг 1. HTML

Сначала рассмотрим простую разметку. Для этого мы будем использовать контейнер с ul для этого выпадающего списка.

Шаг 2. JavaScript

Нам нужно несколько строк javascript, чтобы заставить его работать. Этот сценарий изменяет класс .active при нажатии на оболочку. Следует понимать, что если в оболочке нет класса .active, этот скрипт добавляет его, а если он есть, или наоборот, удаляет.

Вторая часть кода служит элементом, который сворачивает список, когда курсор щелкает на другой части экрана, т.е. список теряет класс .active.

Пример 1

Давайте посмотрим первый пример.

Шаг 1. HTML

Для того чтобы составить этот список, нам нужно несколько элементов. Давайте также поместим несколько элементов в выпадающий список.

Теперь, когда дизайн завершен, перейдем к стилям.

Шаг 2. CSS

Начнем с сортировки стилей с момента создания оболочки:

Затем добавьте небольшую стрелку справа с псевдоэлементом.

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

Когда мы расположили выпадающий список, поместили его под кнопку и задали ему top: 100%, кроме того, что список скрыт, мы уменьшили его непрозрачность до 0. Далее мы определим несколько стилей для выпадающего списка.

Теперь нам нужно установить параметры при нажатии на кнопку списка.

Шаг 3. JavaScript

Теперь нам нужно заставить кнопку выдавать некоторые значения:

С этим примером мы закончили, перейдем к следующему.

Пример 2

Далее мы рассмотрим список, который просит нас войти в профиль через учетную запись в различных популярных социальных сетях.

Читайте так же:
Как создать оглавление для всех названий вкладок электронных таблиц с гиперссылками в Excel?
Шаг 1. HTML

FontAwesome предоставил небольшие иконки, которые мы можем использовать в качестве меток i.

Шаг 2. CSS

Давайте теперь рассмотрим стиль обложек, которые не сильно отличаются от первого примера.

Как и в первом примере, создайте также и стрелку.

Теперь мы добавим выпадающий список.

Обратите внимание, что мы собираемся использовать переход, который заставит список появляться и исчезать постепенно. Примените определенный стиль к спискам и значкам.

Мы добавили цветные полосы к ссылкам, чтобы сделать список более наглядным. Далее мы добавим направление стрелок, когда список активен и пассивен.

Шаг 3. JavaScript

Используя JavaScript, оживим наши элементы.

Пример 3

Этот выпадающий список наиболее часто используется на веб-сайтах. Мы подробно рассмотрим, как внедрить его на вашем сайте.

Шаг 1. HTML

Разметка завершена, перейдем к стилям.

Шаг 2. CSS

Чтобы проиллюстрировать этот момент, мы будем использовать стили границ, тени, закругленные углы и стрелку-указатель.

Рассмотрим стили раскрывающегося списка и его подпунктов.

Шаг 3. JavaScript

Мы изменяем значение выбранной кнопки на javascript.

Завершив этот пример, мы можем перейти к следующему.

Пример 4

В данном примере мы создаем список дел, содержащий элементы требуемого списка дел.

Шаг 1. HTML

Мы добавили несколько ссылок и иконок, чтобы расширить список.

Шаг 2. CSS

Рассмотрим основные стили списков.

Поставьте отступ слева для красной линии.

Несколько стилей для раскрывающегося списка.

Установите верхнее пространство отступа в значение 1px, установите левое пространство в -1px, чтобы расширить положение выпадающего списка.

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

Далее мы настроим красные полосы по бокам. Есть два способа сделать это: один с помощью псевдоэлементов и другой с помощью градиентов. Мы рассмотрим оба способа.

Соблюдение всех дополнительных условий.

Шаг 3. JavaScript
Пример 5

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

Шаг 1. HTML

Разметка завершена, давайте перейдем к стилям.

Шаг 2. CSS

Определяют общие параметры списка.

Активное состояние данного списка.

Когда он активен, мы устанавливаем максимальную высоту выпадающего списка на 400 px.

Шаг 3. JavaScript

Также добавлена поддержка старых браузеров.

Вот и все. Готово!

Материал взят из иностранного источника. Он представлен исключительно в информационных целях.

голоса
Рейтинг статьи
Ссылка на основную публикацию
Adblock
detector