Удобный HTML SELECT
Иногда бывает нужно предоставить пользователю выбор из заранее предопределённого множества элементов и значений, для этого умными людьми разработан такой элемент пользовательского интерфейса, как список SELECT. В этой заемтке я хочу представить не новый, но порой очень удобный вариант реализации этого элемента.
Нетерпеливым можно сразу скачать архив скрипта с примерами GUI element SELECT
Когда элементов много, и вы предоставляете пользователю множественный выбор - пользователю может понадобиться выбрать какие-то элементы вверху списка, какие то внизу, и т.п. А если список длинный, и высота элемента SELECT не позволяет отображать сразу все элементы для выбора? Пользователю приходится прокручивать список, что бы сделать выбор, к тому же выбор может "слететь", если он не нароком кликнул мышкой, и не зажал при этом CTRL..., да и мало ли ещё по какой причине. В общем в подобных случаях это может стать источником проблем.
Пример (неудачный) - список стран, по которым вы хотели бы совершить круиз (список не полный):
Люди давно придумали выход - использовать два поля. Левое для отображения всех доступных элементов, и правое для помещения в него выбранных элементов, и пару кнопок между ними для управления перемещением этих самых элементов. Пример вы можете видеть ниже:
Удобный html select элемент
Идея следующая: вы выбираете несколько элементов в левом окошке, нажимаете на кнопку с соответствующим направлением стрелок и выбранные элементы перемещаются в правое окошко - тем самым мы сделали выбор. Из левого они следуя логике исчезают. Что бы переместить элементы из правого окошка в левое, тем самым отменив их выбор - нужно так же выделить их и нажать кнопку а обратном направлении... Ну, думаю вы разберётесь. Такие реализации вы наверняка встречали в десктопных прогах.
К сожалению подобный функционал не является стандартным, но не беда я написал скрипт, который позволяет реализовать его.
Минимум нам понадобятся следующие элементы интерфейса:
- 2 эелемента SELECT
- 2 эелемента BUTTON ( или INPUT type="button" )
Остальное по мере надобности - в примере мы больше никаких элементов использовать не будем. В примере я использую список стран и поэтому использовал в значениях атрибутов name и id слово countries - Вы вольны "обзывать" их как вашей душе угодно, но незабудьте поправить тогда код вызова скрипта (я укажу где).
Вот листинг HTML (я взял чуть - чуть элементов для SELECT что бы не загромождать страничку) и не пугать новичков километровым, бесполезным листингом
<form name="ctrs" action="" method="post"> <table> <tr> <td> <select id="src_countries" style="width:270px" multiple="multiple" size="10"> <option value="AU">Австралия</option> <option value="AT">Австрия</option> <option value="AZ">Азербайджан</option> <option value="AL">Албания</option> <option value="DZ">Алжир</option> <option value="VI">Американские Виргинские острова</option> </select> </td> <td> <p><button type="button" id="take" >>></button></p> <p><button type="button" id="drop" ><<</button></p> </td> <td> <select name="countries[]" id="dst_countries" style="width:270px" multiple="multiple" size="10"> <option value="AS">Американское Самоа</option> <option value="AI">Ангилья</option> <option value="AO">Ангола</option> <option value="AG">Антигуа и Барбуда</option> <option value="AR">Аргентина</option> </select> </td> </tr> <tr> <td colspan="3" align="center"> <button type="submit">ОТПРАВИТЬ</button> </td> </tr> </table> </form>
Ничего сложного - форма, две кнопки, два SELECT-а, кнопка отправки, да табличка-каркас.
Оговорю сразу - на сервер поступят все элементы, содержащиеся в правом элементе SELECT с id="dst_countries" в виде массива, не зависимо от того выбраны они внутри элемента или нет. Элементы левого SELECT с id="src_countries" - считаются не выбранными, поэтому мы даже не задаем ему имя - на сервере нам эти данные не нужны
Обратите внимание, что предзаполнены оба элемента SELECT - это я сделал для того, что бы показать, что значения по-умолчанию (или, если пользователь уже когда-то делал свой выбор) помещаются сразу в правый эелементSELECT.
Элемент SELECT с id="dst_countries" имеет имя (атрибут name) countries[] - если указать имя таким макаром - со скобками, то сервер "увидит" массив, если указать просто countries, то сервер "увидит" только последний эелемент имейте это ввиду.
Дальше подключаем скачанный скрипт:
<script type="text/javascript" src="какой_то_путь_к_скрипту/multiselect.js"></script>
На случай, если вы панически боитесь что - либо скачивать с незнакомых серверов, то вот вам листинг скрипта
var MultiSelect = (function (GLOB) { // Добавить элементы в поле назначения: function moveItems(btn, srcSelect, dstSelect) { btn.onclick = function () { var i; for (i = srcSelect.options.length - 1; i >= 0; i -= 1) { if (srcSelect.options[i].selected) { dstSelect.add(new Option(srcSelect.options[i].text, srcSelect.options[i].value)); srcSelect.remove(i); } } }; } // Подготовка данных к отправке: function formSubmit(element) { // Ф-ция делает все элеметы спика select выбраными: function makeSelect(element) { var i; for (i = 0; i < element.options.length; i += 1) { element.options[i].selected = true; } } // Ниже мы всего лишь кроссбрауз. устанавливаем слушатель // события отправки формы: if (GLOB.document.addEventListener) { element.form.addEventListener("submit", function () { makeSelect(element); }, true); } else if (GLOB.document.attachEvent) { element.form.attachEvent("onsubmit", function () { makeSelect(element); }); } else { element.form.onsubmit = function () { makeSelect(element); }; } } return function (srcSelect, dstSelect, takeBtn, dropBtn) { return { init : function (srcSelect, dstSelect, takeBtn, dropBtn) { moveItems(takeBtn, srcSelect, dstSelect); moveItems(dropBtn, dstSelect, srcSelect); formSubmit(dstSelect); } }.init(srcSelect, dstSelect, takeBtn, dropBtn); }; }(this));
Далее производим инициализацию элемента (скрипта). Здесь, если вы заменяли значния id из HTML листинга выше - сделайте поправки.
<script type="text/javascript"> MultiSelect(document.getElementById("src_countries"), document.getElementById("dst_countries"), document.getElementById("take"), document.getElementById("drop")); </script>
Собственно всё. Кстати, чуть не забыл - на сервер конечно "уйдут" только те элементы из списка SELECT с id="dst_countries", которые конечно же были выбраны внутри списка - на поведение браузера мы повлиять никак не можем. Поэтому внутри скрипта перед событием onsubmit (отправкой формы) срабатывает функция - обработчик события, которая автоматически делает выбранными все элементы списка перед тем, как данные отправятся в длинный путь на сервер. Обработчик этот "повешен" по-правильному через метод addEventListener (или attachEvent в случае с IE) поэтому не создаст конфликтов обработчиков, если таковые у вас уже имеются, но имейте ввиду, если вы на отправку формы навесите свой обработчик да ещё таким методом:
<script type="text/javascript"> myform.onsubmit = function (e) { // какой то ваш код... }; </script>
То я не гарантирую что данные попадут на сервер. Ну, вот теперь точно всё. Скрипт работает во всех нужных браузерах: IE6-9, Opera, Chrom, FireFox, Safari. Пользуйтесь на здоровье :)
Https://sf2v.ru/itemslist/podshipnik_ucf_212
опорные подшипник ucf 212 https://sf2v.ru/itemslist/podshipnik_ucf_212. Каталог подшипников
sf2v.ru
Добавить комментарий
Информация копипастерам
Внимание! Копирование контента с сайта, возможно только с разрешения администратора. Т.е. Меня! Я скорее всего разрешу Вам это сделать, в обмен на живую ссылку, на статью оригинал.