Я уверен, что в тот или иной момент вы столкнулись с виджетом формы, подобным приведенному ниже, позволяющим передавать варианты из одного мультиселектора в другой.
Недавно в Quirks Mode я столкнулся с руководством по созданию такого виджета. Хотя неплохой сценарий, когда все было сказано и сделано, он подходил к 40 строкам JS. Я полагаю, это не ужасно, но мы говорим о некоторой простой функциональности.
Это показалось мне прекрасным примером для демонстрации простой и компактной природы кодирования jQuery. Виджет, работающий выше, выполняется из следующего кода:
$ (). ready (function () {
$ ('# add'). click (function () {
return! $ ('опция # select1: selected'). remove (). appendTo ('# select2');
} );
$ ('# remove'). click (function () {
return! $ ('опция # select2: selected'). remove (). appendTo ('# select1');
});
});
Вот и все … 8 строк.
Вы также можете попробовать это на следующей тестовой странице:
<html>
<head>
<script src = "js / jquery.js" type = "text / javascript"> </ script>
<script type = "text / javascript">
$ (). ready (function () {
$ ('#add'). click (function () {
return! $ ('опция # select1: selected'). remove (). appendTo ('# select2');
});
$ ('# remove'). click (function () {
return! $ ('опция # select2: selected'). remove (). appendTo ('# select1');
});
});
</ script>
<style type = "text / css">
a {
display: block;
граница: 1px solid #aaa;
текстовое оформление: нет;
цвет фона: #fafafa;
цвет:# 123456;
поле: 2px;
ясно: то и другое;
}
div {
плыть налево;
выравнивание текста: по центру;
поле: 10px;
}
выберите {
ширина: 100 пикселей;
высота: 80 пикселей;
}
</ style>
</ head>
<body>
<div>
<select множественный id = "select1">
<option value = "1"> Option 1 </ option>
<option value = "2"> Option 2 </ option>
<option value = "3"> Option 3 </ option>
<option value = "4"> Option 4 </ option>
</ select>
<a href="#" id="add"> add >> </a>
</ div>
<div>
<выберите несколько id = "select2"> </ выберите>
<a href="#" id="remove"> << удалить </ a>
</ div>
</ body>
</ html>
Поскольку целью этого виджета обычно является сбор всех элементов во втором множественном выборе, вы можете использовать следующий фрагмент кода для автоматического выбора всех параметров перед отправкой.
$ ('form'). submit (function () {
$ ('# select2 option'). each (function (i) {
$ (this) .attr ("selected", "selected");
});
}) ;
Просто убедитесь, что вы включили этот фрагмент в обработчик $ (). Ready ().
Спасибо за просмотр, и я надеюсь, что вы нашли это полезным! Не стесняйтесь использовать и изменять без ограничений.