Удобный HTML SELECT

Удобный 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" >&gt;&gt;</button></p>
				<p><button type="button" id="drop" >&lt;&lt;</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. Пользуйтесь на здоровье :)

Добавить комментарий


Защитный код
Обновить



Кто на сайте
Сейчас 31 гостей онлайн