<table>
<tr>
<td>
<input name=list1 type=text maxlength=200 class=forms size=72>
</td>
<td>
<INPUT name=B1 onclick=move(this.form.list1,this.form.list2) type=button value=" >> "><BR>
<INPUT name=B2 onclick=move(this.form.list2,this.form.list1) type=button value=" << ">
</td>
<td>
<SELECT multiple name=list2 size=4>
<OPTION value=21>грозу</OPTION><OPTION value=22>духоту</OPTION><OPTION value=23>жару</OPTION>
</SELECT>
</td>
</tr>
</table>

<script type="text/javascript">
<!--

function move(element1, element2, delimiter)
{
if (delimiter === undefined)
delimiter=', ';

var values;

switch (element1.tagName)
{
case 'SELECT':
values=getSelectValues(element1);
break;

case 'INPUT':
if (element1.type != 'text')
return alert('Это не текстовое поле (' + element1.type + ')!');

values=getInputValues(element1, delimiter);
break;

default:
return alert('Неизвестный тип элемента: ' + element1.tagName + '!');
}

values.sort();

switch (element2.tagName)
{
case 'SELECT':
setSelectValues(element2, values);
break;

case 'INPUT':
if (element2.type != 'text')
return alert('Это не текстовое поле (' + element2.type + ')!');

setInputValues(element2, values, delimiter);
break;

default:
return alert('Неизвестный тип элемента: ' + element2.tagName + '!');
}
}


function getSelectValues(select)
{
var values=new Array(), optionsToDelete=new Array();
for (i=0; i<select.options.length; i++)
if (select.options[i].selected)
{
values.push(select.options[i].text);
optionsToDelete.push(select.options[i]);
}

for (i=0; i<optionsToDelete.length; i++)
optionsToDelete[i].parentNode.removeChild(optionsToDelete[i]);

return values;
}


function setSelectValues(select, values)
{
var optionIndex=0, valueIndex=0;

while (valueIndex < values.length)
{
while ((optionIndex<select.options.length) && (valueIndex < values.length) && (select.options[optionIndex].text < values[valueIndex]))
optionIndex++;

var option=document.createElement('option');
option.appendChild(document.createTextNode(values[valueIndex]));
option.value=values[valueIndex];

select.insertBefore(option, select.options[optionIndex]);

valueIndex++;
}
}


function getInputValues(input, delimiter)
{
var values=input.value.split(delimiter);
input.value='';
return values;
}

function setInputValues(input, values, delimiter)
{
if (input.value)
{
values.splice(values.length, 0, input.value.split(delimiter));
values.sort();
}
input.value=values.join(delimiter);
}

//-->
</script>

<...>

<form>
<table>
<tr>
<td>
<input name=input1 type=text maxlength=200 class=forms size=72>
</td>
<td>
<INPUT name=B1 onclick="move(this.form.input1, this.form.list1);" type=button value=" >> "><BR>
<INPUT name=B2 onclick="move(this.form.list1, this.form.input1);" type=button value=" << ">
</td>
<td>
<SELECT multiple name=list1 size=4>
<OPTION value=21>грозу</OPTION><OPTION value=22>духоту</OPTION><OPTION value=23>жару</OPTION>
</SELECT>
</td>
</tr>
</table>
</form>