473,320 Members | 1,881 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 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 3005
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

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

Similar topics

7
by: Hal Vaughan | last post by:
I have a sample script from a book ("Beginning JavaScript" by Paul Wilton) that removes or adds a choice to a <SELECT> element. The <FORM> is form1 and the <SELECT> is theDay. The example uses...
9
by: F. Da Costa | last post by:
Hi, Does anybody know why IE5+ does *not* honour array objects (like a table) across a session? Example: Frame A contains a var tableVar which is set via form Frame B (on init) using...
2
by: Paolo Pignatelli | last post by:
I am trying to get an output/file like this (below) in an XML file (MyXmlFile.xml) (which I will use for a slide show) -- <gallery timer="3" order="sequential" fadetime="2" looping="yes"...
4
by: dtwalter | last post by:
Is it possible to ORDER BY a SubSelect? I don't see why it wouldn't be, but I'm having some trouble. Hopefully it's just a simple error in syntax and somebody can tell me. Here's what I'm trying...
1
by: shankwheat | last post by:
I've been using this little script to change the <a href=""></a> value of a link which works well. <script language="javascript" type="text/javascript"> function ordering(sorder) { var link =...
2
by: Jason | last post by:
Hi all, I know how to do this the hard way, but I suspect that there's an easier option. I'm creating a program that requires a series of 4 or 6 select menus. Something like this: <select...
3
by: groups2 | last post by:
I have a form with a dropdown (select) menu a text input field and some hidden values, along with an input botton that triggers an ajax function that submits the form. If the button is after the...
2
by: paul | last post by:
I have a JS function to change the width of a <divthat works great in Firefox, but not at all in IE7. In IE an error message occurs: Line: 92 Char: 5 Error: Invalid Argument Code: 0 Firefox...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

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.