469,345 Members | 5,849 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,345 developers. It's quick & easy.

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 2849
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
1 post views Thread by CARIGAR | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.