I have constructed a clickable list of words which are added to a select box. I then have buttons to move the added elements up or down in the list.
The code below seems to work fine for the first change (UP only) but after that the last element in the list disappears :(
I have no idea why this is happening so could anyone offer a solution or a better method of doing the above task? Thanks in advance
Expand|Select|Wrap|Line Numbers
- <html>
- <head>
- <script type="text/javascript">
- function moveText(name, id)
- {
- var selected_box = document.getElementById("textarea_two");
- var new_option = new Option(name, id);
- selected_box.options[selected_box.length] = new_option;
- }
- function moveup(){
- var y=document.getElementById("textarea_two").selectedIndex
- var x=document.getElementById("textarea_two").options
- if (y>0){
- var selected = x[y];
- var dest = x[y-1];
- //swap option elements
- x[y-1] = selected;
- x[y] = dest;
- //reset variables if necessary ?
- x = null;
- y = null;
- selected = null;
- dest = null;
- }
- }
- </script>
- </head>
- <body>
- <table>
- <tr>
- <td id="textarea_one">
- <li id= "1" title="text one" ondblclick="moveText(this.title, this.id)">text one</li>
- <li id= "2" title="text two" ondblclick="moveText(this.title, this.id)">text two</li>
- <li id= "3" title="text three" ondblclick="moveText(this.title, this.id)">text three</li>
- </td>
- </tr>
- </table>
- <br>
- <select id="textarea_two" style="width:150px;" size="7"></select>
- <br>
- Move selected: <br>
- ><span onclick="moveup()">UP</span><br>
- ><span onclick="movedown()">DOWN</span>
- </body>
- </html>