Entry
How can I move the selected OPTION of a SELECT up or down?
Jun 7th, 2004 10:00
Brad Parks, Martin Honnen,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
moving an option up and down
</title>
<script type="text/javascript">
function moveSelected (select, down) {
if (select.selectedIndex != -1) {
if (down) {
if (select.selectedIndex != select.options.length - 1)
var i = select.selectedIndex + 1;
else
return;
}
else {
if (select.selectedIndex != 0)
var i = select.selectedIndex - 1;
else
return;
}
var swapOption = new Object();
swapOption.text = select.options[select.selectedIndex].text;
swapOption.value = select.options[select.selectedIndex].value;
swapOption.selected = select.options[select.selectedIndex].selected;
swapOption.defaultSelected = select.options
[select.selectedIndex].defaultSelected;
var anIndex = select.selectedIndex;
for (var property in swapOption)
select.options[anIndex][property] = select.options[i][property];
for (var property in swapOption)
select.options[i][property] = swapOption[property];
}
}
</script>
</head>
<body>
<form name="formName" action="whatever.html">
<select name="selectName" size="5">
<option>Kibo</option>
<option>Maho</option>
<option>Xibo</option>
<option>Leno</option>
<option>Jaffo</option>
</select>
<input type="button" value="up"
onclick="moveSelected(this.form.selectName, false);"
/>
<input type="button" value="down"
onclick="moveSelected(this.form.selectName, true);"
/>
</form>
</body>
</html
