471,872 Members | 1,450 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,872 software developers and data experts.

changing order of elements in select menu

Hi,

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
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4.  
  5. function moveText(name, id)
  6. {
  7.     var selected_box = document.getElementById("textarea_two");
  8.     var new_option = new Option(name, id);
  9.     selected_box.options[selected_box.length] = new_option;    
  10. }
  11.  
  12.  
  13. function moveup(){
  14.  
  15.     var y=document.getElementById("textarea_two").selectedIndex
  16.     var x=document.getElementById("textarea_two").options
  17.  
  18.     if (y>0){
  19.         var selected = x[y];
  20.         var dest = x[y-1];
  21.  
  22.         //swap option elements
  23.         x[y-1] = selected;
  24.         x[y] = dest;    
  25.  
  26.         //reset variables if necessary ?
  27.         x = null;
  28.         y = null;
  29.         selected = null;
  30.         dest = null;    
  31.     }
  32. }
  33. </script>
  34. </head>
  35.  
  36. <body>
  37. <table>
  38. <tr>
  39. <td id="textarea_one">
  40. <li id= "1" title="text one" ondblclick="moveText(this.title, this.id)">text one</li>
  41. <li id= "2" title="text two" ondblclick="moveText(this.title, this.id)">text two</li>
  42. <li id= "3" title="text three" ondblclick="moveText(this.title, this.id)">text three</li>
  43. </td>
  44. </tr>
  45. </table>
  46.  
  47. <br>
  48. <select id="textarea_two" style="width:150px;" size="7"></select>
  49. <br>
  50.  
  51. &nbsp;Move selected: <br>
  52. ><span onclick="moveup()">UP</span><br>
  53. ><span onclick="movedown()">DOWN</span>
  54.  
  55.  
  56. </body>
  57. </html>
Apr 25 '07 #1
1 2923
I've made a work around for this problem. I used a string to store both the previous and next values of each option element that is being changed so as to avoid loosing the data, which is what was happening in the above code.

Hope this might be useful to somebody. If anyone knows a simpler way of doing this please let me know! Cheers

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4.  
  5. function moveText(name, id)
  6. {
  7.     var new_option = new Option(name, id);
  8.     var x=document.getElementById("textarea_two").options;
  9.     var y=document.getElementById("textarea_two").selectedIndex;
  10.     new_option.tabIndex = x.length;
  11.     //alert(new_option.tabIndex)
  12.     var counter = 0
  13.     //alert(new_option.text);
  14.     //alert(x.length);
  15.  
  16.  
  17.     //loop through option values if they exist and if the item has not already been added then add to list
  18.     if (x.length > 0){
  19.         for(var i=0;i<x.length;i++){    
  20.         //alert(x[i].text)
  21.             if (x[i].text == new_option.text){
  22.                 counter++;
  23.             }
  24.         }
  25.         //alert(counter);
  26.         if (counter == 0){
  27.             x[x.length] = new_option;
  28.         }else{
  29.             alert("item already added to calendar!");
  30.         }
  31.     }else{
  32.         x[x.length] = new_option;
  33.     }
  34.  
  35. }
  36.  
  37.  
  38. function reOrder(direction){
  39.  
  40.     //alert(direction);
  41.     var y=document.getElementById("textarea_two").selectedIndex;
  42.     var x=document.getElementById("textarea_two").options;
  43.  
  44.     var selected = x[y];
  45.  
  46.     //set the direction up or down
  47.     if (direction == "up" ){
  48.         var dest = x[y-1];
  49.     }else if (direction == "down"){
  50.         var dest = x[y+1];
  51.     }
  52.  
  53.     var textString = dest.text;
  54.     var valueString = dest.value;
  55.     //alert(textString)
  56.  
  57.     //make string containing both values so that the 'dest' data is not lost in swap
  58.     textString += "&"+selected.text;
  59.     valueString += "&"+selected.value;
  60.     //alert(textString)
  61.  
  62.     //first half equals destination text
  63.     var firstHalfTextString = textString.substr(0,[textString.indexOf("&")]) 
  64.     var firstHalfValueString = valueString.substr(0,[textString.indexOf("&")])
  65.     //alert(firstHalfTextString)
  66.  
  67.     //second half equals selected text
  68.     var secondHalfTextString = textString.substr(textString.indexOf("&")+1)
  69.     var secondHalfValueString = valueString.substr(textString.indexOf("&")+1)
  70.     //alert(secondHalfTextString)
  71.  
  72.     //swap the option elements text values
  73.     selected.text = firstHalfTextString;
  74.     dest.text = secondHalfTextString;
  75.     selected.value = firstHalfValueString;
  76.     dest.value = secondHalfValueString;
  77.  
  78.     //set the select to the moved element
  79.     if (direction == "up" ){
  80.         document.getElementById("textarea_two")[y-1].selected = true;
  81.     }else if (direction == "down"){
  82.         document.getElementById("textarea_two")[y+1].selected = true;    
  83.     }
  84.     //alert("tabindex="x.selected.tabIndex+"&value"+x.selected.value)****
  85.  
  86. }
  87.  
  88. </script>
  89. </head>
  90.  
  91. <body>
  92. <ul id="textarea_one">
  93. <li id= "1" title="text one" ondblclick="moveText(this.title, this.id)">text one</li>
  94. <li id= "2" title="text two" ondblclick="moveText(this.title, this.id)">text two</li>
  95. <li id= "3" title="text three" ondblclick="moveText(this.title, this.id)">text three</li>
  96. </ul>
  97.  
  98. <br>
  99. <select id="textarea_two" style="width:150px;" size="7"></select>
  100. <br>
  101.  
  102. &nbsp;Move selected: <br>
  103. ><span onclick="reOrder('up')">UP</span><br>
  104. ><span onclick="reOrder('down')">DOWN</span>
  105.  
  106.  
  107. </body>
  108. </html>
Apr 26 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

7 posts views Thread by Hal Vaughan | last post: by
2 posts views Thread by Paolo Pignatelli | last post: by
4 posts views Thread by dtwalter | last post: by
1 post views Thread by shankwheat | last post: by
3 posts views Thread by groups2 | last post: by
2 posts views Thread by paul | last post: by
NeoPa
reply views Thread by NeoPa | last post: by
reply views Thread by YellowAndGreen | last post: by
aboka
reply views Thread by aboka | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.