Glem mine sidste to indlæg! Elementets attributter må naturligvis ikke afspejle brugerændringer af dynamiske properties :)
Anyway, så en rettet, mere generisk version:
<script type="text/javascript">
function sortSelect(oSel) {
var aOpts = oSel.getElementsByTagName("option");
var aTest = [];
for (var i=aOpts.length-1; i>=0; i--) {
aTest[i] = [aOpts[i].firstChild.nodeValue, aOpts[i]];
}
aTest.sort(doSort);
for (var i=0,j=aTest.length; i<j; i++) oSel.appendChild(aTest[i][1]);
aTest = null;
function doSort(a, b) {
return a[0]>b[0] ? 1 : a[0]<b[0] ? -1 : 0;
}
}
function moveOptions(sSelFrom, sSelTo) {
var oFrom = document.getElementById(sSelFrom);
var oTo = document.getElementById(sSelTo);
var aFromOpts = oFrom.getElementsByTagName("option");
for (var i=aFromOpts.length-1; i>=0; i--) {
if (aFromOpts[i].selected) oTo.appendChild(aFromOpts[i]);
}
sortSelect(oTo);
oTo.selectedIndex = -1;
}
</script>
<select id="sel_a" style="width:180px;height:100px;float:left" multiple="multiple">
<option value="aa">Option AA</option>
<option value="ab">Option AB</option>
<option value="ac">Option AC</option>
<option value="ad">Option AD</option>
</select>
<div style="width:40px;margin:20px 10px;float:left">
<button onclick="moveOptions('sel_a', 'sel_b')" style="width:40px;">>></button>
<button onclick="moveOptions('sel_b', 'sel_a')" style="width:40px;"><<</button>
</div>
<select id="sel_b" style="width:180px;height:100px;float:left" multiple="multiple">
<option value="ba">Option BA</option>
<option value="bb">Option BB</option>
<option value="bc">Option BC</option>
<option value="bd">Option BD</option>
</select>
