moving options from one select list to another.

I wanted to know if I could move options from one select list to another by using document.getElementById instead of using sel and other methods.

I just wish to directly call one particular select list. because I worried that all these select list scripts don't work when there are more than two select list on a page.
I have a nice script I want to modify but I don't understand. selfrom and selto
I never see anything that points to my select list's ID, class or name.

however the code works. Can some one help me understand what is happening?

Code:

---

function moveOptions(theSelFrom, theSelTo)
{
  var selLength = theSelFrom.options.length;
  for(var i=0; i<selLength; i++)
  {
    if(theSelFrom.options[i].selected)
    {
      if (!addOption(theSelTo, theSelFrom.options[i].text, theSelFrom.options[i].value)){
        theSelFrom.options[i].selected = false; //remove selection if not duplicate and added
      }

---

You are not showing us the addOption() function. Without that, I can't say for sure how this works. What you do have there shows that moveOptions() takes two arguments (theSelFrom, theSelTo). These are the select element that you are moving an option from and the select element you are moving an option to. These may be supplied in at least several ways. It could as document.getElementById(), as part of a form's elements collection, or via the this keyword of an inline javascript function of the select element itself. There are variations on each of these. There are other possible methods.

To answer your question at least in part though, it should be possible to use DOM methods (like - removeChild() and insertBefore() or appendChild()) and document.getElementById() to move options around.

Do you have an example using the method from your post? If so, post the full code (including markup) or a link to it. Then explain specifically what you want it to do that it doesn't.

most of the select list scripts don't use the document.getElementById()
the script I have doesn't use it so I've become confused cause I can't modify it.

this is one example

Code:

---

function fnMoveItems(lstbxFrom,lstbxTo)
{
 var varFromBox = document.all(lstbxFrom);
 var varToBox = document.all(lstbxTo);
 if ((varFromBox != null) && (varToBox != null))
 {
  if(varFromBox.length < 1)
  {
  alert('There are no items in the source ListBox');
  return false;
  }
  if(varFromBox.options.selectedIndex == -1) // when no Item is selected the index will be -1
  {
  alert('Please select an Item to move');
  return false;
  }
  while ( varFromBox.options.selectedIndex >= 0 )
  {
  var newOption = new Option(); // Create a new instance of ListItem
  newOption.text = varFromBox.options[varFromBox.options.selectedIndex].text;
  newOption.value = varFromBox.options[varFromBox.options.selectedIndex].value;
  varToBox.options[varToBox.length] = newOption; //Append the item in Target Listbox
  varFromBox.remove(varFromBox.options.selectedIndex); //Remove the item from Source Listbox
  }
 }
 return false;
}

---

this is what I've been using. And I wonder why the particular select list only tigers all the functions since I don't see the select list calling any function in the body. I was wondering if I wanted to let two select list move options to the third select list named sel2 should I change how the script find the select list or am i missing something easy.

Code:

---

function deleteOption(theSel)
{
  var theIndex = theSel.options.selectedIndex;
  if (theIndex != -1){
    theSel.options[theIndex] = null;
  }
}



function moveOptions(theSelFrom, theSelTo)
{
  var selLength = theSelFrom.options.length;
  for(var i=0; i<selLength; i++)
  {
    if(theSelFrom.options[i].selected)
    {
      if (!addOption(theSelTo, theSelFrom.options[i].text, theSelFrom.options[i].value)){
        theSelFrom.options[i].selected = false; //remove selection if not duplicate and added
      }
    }
  }
 
  if(NS4) history.go(0);
}

function addOption(sel, txt, val){
  //check if the option already exists
  var dupe=false;
  for (var i=0; i<sel.options.length; i++){
    if (sel.options[i].value==val && sel.options[i].text==txt){
      dupe=true;
      break;
    }
  }
  if (!dupe){ //add the option at the end
    sel.options[sel.options.length] = new Option(txt, val);
    setTimeout(function(){sel.options[sel.options.length-1].selected=true;},10); //delay selection in order for the combobox to scroll (if any) to the bottom.
  }
  return dupe;
}




in the body
<select name="sel1"  size="13" multiple="multiple" onchange="this.form.sel2.selectedIndex=-1;" id="selM"  class="channels" >
                       
                <option  value="|" title="JAC" class="ice">JAC</option>

---

Still not enough code to go by. There's only one select, and only in the second example, and it only has one option. I need the full markup of both selects, including their parent form(s) if any.

If you want more help, please post code of or a link to a working example. I need both the script and the markup.

In the meantime, I'll see what I can work up using the DOM.

Here's a simple demo of concept:

Code:

---

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function moveOption(s1, s2, opt){
        s1 = document.getElementById(s1);
        s2 = document.getElementById(s2);
        opt = opt || s1.options[s1.options.selectedIndex];
        if(opt.value){
                s2.appendChild(s1.removeChild(opt));
        }
}
</script>
</head>
<body>
<form>
<select id="sel1">
<option value="">Please Select</option>
<option value="bob">Bob</option>
<option value="carol">Carol</option>
<option value="ted">Ted</option>
<option value="alice">Alice</option>
</select>
<select id="sel2">
<option value="">Please Select</option>
</select>
<select id="sel3">
<option value="">Please Select</option>
</select><br>
<input type="button" value="Move selected of first select to second select" onclick="moveOption('sel1', 'sel2');">
<br>
<input type="button" value="Move selected of first select to third select" onclick="moveOption('sel1', 'sel3');">
<br>
<input type="button" value="Move selected of second select to first select" onclick="moveOption('sel2', 'sel1');">
<br>
<input type="button" value="Move selected of third select to second select" onclick="moveOption('sel3', 'sel2');">
</form>
</body>
</html>

---

hum...I see how it's set up but what if select list one and two have options and select list three don't.




Here is my full code. the original code had the sel, selM, sending values to sel2. I wanted to see if I could send values from selM and sel3 to sel2 using document.getElementById because if I could do that then I could connect to a getElementByClassName function so that every select list of a certain class could send options to sel2.

I have an idea how to do it but I sill need some of the code from this script to send to the media player. I still have to send the time to the function.

Code:

---

<head>
<script language="JavaScript" type="text/javascript">

var NS4 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) < 5);


function deleteOption(theSel)
{
  var theIndex = theSel.options.selectedIndex;
  if (theIndex != -1){
    theSel.options[theIndex] = null;
  }
}

function moveOptions(theSelFrom, theSelTo)
{
  var selLength = theSelFrom.options.length;
  for(var i=0; i<selLength; i++)
  {
    if(theSelFrom.options[i].selected)
    {
      if (!addOption(theSelTo, theSelFrom.options[i].text, theSelFrom.options[i].value)){
        theSelFrom.options[i].selected = false; //remove selection if not duplicate and added
      }
    }
  }
 
  if(NS4) history.go(0);
}

function addOption(sel, txt, val){
  //check if the option already exists
  var dupe=false;
  for (var i=0; i<sel.options.length; i++){
    if (sel.options[i].value==val && sel.options[i].text==txt){
      dupe=true;
      break;
    }
  }
  if (!dupe){ //add the option at the end
    sel.options[sel.options.length] = new Option(txt, val);
    setTimeout(function(){sel.options[sel.options.length-1].selected=true;},10); //delay selection in order for the combobox to scroll (if any) to the bottom.
  }
  return dupe;
}



 var ctr=0;
function playSongs(){
  var arr, len;
  var sel = document.forms[0].sel2;
  var defaultLen = 310; //6 mins
  if (ctr<sel.options.length){
    arr = sel.options[ctr].value.split("|");
    if (arr.length>0 && arr[0]){
      len = (Number(arr[1]))? Number(arr[1])*1000:defaultLen*1000; //in milliseconds     
      document.getElementById('music1').innerHTML='<object width="500" height="450" id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject"><param name="URL" value="'+arr[0]+'"><param name="autoStart" VALUE="true"><param name="uiMode" value="full"><param name="currentPosition" vaule="1" ><param name="ShowStatusBar" value="true"  ><embed type="application/x-mplayer2" src="'+arr[0]+'" ShowControls="0" width="300" height="300"></embed></object>';
    }
    ctr++;
    setTimeout("playSongs()", len);
  }
}
</script>
</head>

---

this is the html

Code:

---

<body>

<div id="ChooseSeason" >  <form id="misteriof" action="yourpage.asp" method="post">

           
        <div id="slider">   
            <select name="sel1"  size="13" multiple="multiple" onchange="this.form.sel2.selectedIndex=-1;" id="selM"  class="channels" >
           
        <option  value="|" title="JAC" class="ice">JAC</option>   
<option  class="dark" value="http://www.fileden.com/files/2006/11/20/398972/HIM%20-%20Dark%20Light%20-%2004%20-%20Killing%20Loneliness.mp3|">H.I.M-Wings of a butterfly</option>
<option class="light" value="C:/Users/Talibah/TV on the PC/Jackie Chan Adventures/Season 3/S3E53 Jackie Chan Adventures - Re-Enter the J Team.avi|436">avi</option>
<option value="http://www.fileden.com/files/2006/11/20/398972/Seal%20-%20Kiss%20From%20A%20Rose.mp3|" class="dark">Seal-Kiss from a Rose</option>
<option value="http://www.fileden.com/files/2006/11/20/398972/The%20Alliance%20ft.%20Fabo%20-%20Tattoo%20(Dirty).mp3|" class="light">Alliance-Tattoo </option>
<option value="http://www.fileden.com/files/2006/11/20/398972/Cradle%20Of%20Filth%20-Nymphetamine.mp3|436" class="dark">Cradle of Filth-Nymphetamine</option>
<option value="http://www.fileden.com/files/2006/11/20/398972/Black%20Light%20Burns%20-%20Lie(1).mp3|" class="light">Black Light Burns-Lie</option>
<option value="http://www.fileden.com/files/2006/11/20/398972/Nelly%20Furtado%20-%20Maneater.mp3|" class="dark">Nelly Furtado-Maneater</option>


<option value="|">Em</option>
<option value="|">Em</option>
<option value="|">Em</option>
<option value="|">Em</option>
<option value="|">Em</option>
</select>
 
 
 
 
 
 
 
 
 <!--experimental select don't use the exact same files. all is left to do is get the js to collect from any slect than copy the page. I'm thinking about showing the users playlist -->
 
        <select name="sel3"  size="13" multiple="multiple"  id="nex2" class="channels" >
       
        <option  value="|" title="JAC2">JAC2</option>   
<option  class="dark" value="http://www.fileden.com/files/2006/11/20/398972/HIM%20-%20Dark%20Light%20-%2004%20-%20Killing%20Loneliness.mp3|">H.I.M-Wings of a butterfly</option>
<option class="light"  value="C:/Users/Talibah/TV on the PC/X-Men.Evolution.Seasons.1-3.Complete.DVDRip[EJ]/Season 1/X-Men.Evolution.1x11.Grim.Reminder.DVDRip[EJ].avi" >avi</option>
<option value="http://www.fileden.com/files/2006/11/20/398972/Seal%20-%20Kiss%20From%20A%20Rose.mp3|">Seal-Kiss from a Rose</option>
<option value="http://www.fileden.com/files/2006/11/20/398972/The%20Alliance%20ft.%20Fabo%20-%20Tattoo%20(Dirty).mp3|">Alliance-Tattoo </option>
<option value="http://www.fileden.com/files/2006/11/20/398972/Cradle%20Of%20Filth%20-Nymphetamine.mp3|436">Cradle of Filth-Nymphetamine</option>
<option value="http://www.fileden.com/files/2006/11/20/398972/Black%20Light%20Burns%20-%20Lie(1).mp3|">Black Light Burns-Lie</option>
<option value="http://www.fileden.com/files/2006/11/20/398972/Nelly%20Furtado%20-%20Maneater.mp3|">Nelly Furtado-Maneater</option>


<option value="|">Em</option>
<option value="|">Em</option>
<option value="|">Em</option>
<option value="|">Em</option>
<option value="|">Em</option>
</select>
 
 

 
 </div>
 
 
 
 
 <div id="ubuttons">

           
            <select name="sel2" size="4"  multiple="multiple" onchange="this.form.sel1.selectedIndex=-1;" id="userChoose">
           
            <option value="">Em</option>

            </select>
           
       
        <input type = "button" id = "btnMoveLeft" value="try" onclick = "fnMoveItems('selM','sel2')"/>
            <input type="button" value="add"
            onclick="moveOptions(this.form.sel1, this.form.sel2);" />
            <input type="button" value="Del"
            onclick="deleteOption(this.form.sel2);" />
        <input type="button" value="Play" onclick="playSongs()" />
        </div>

           
</form>  <!--blue trans background--> </div>




           
           




<div id="misterioProgram">

 <object width="550" height="450" id="Player"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
type="application/x-oleobject">
<param name="URL" value="">
<param name="autoStart" VALUE="true">
<param name="uiMode" value="full">
<param name="currentPosition" value="1" >
<param name="ShowStatusBar" value="true"  >
<embed type="application/x-mplayer2"
src=""
ShowControls="0"
width="550"
height="450">
</embed>
</object>
</div>
</body>

---

I'm getting this error:

Quote:

---

Error: document.getElementById("music1") is null
Line: 58

---

That's in the playSongs() function. However, I see what it's trying to and would (in Firefox with the required plug in at least) do if the markup agreed with it. The playSongs() function is independent of the others. So you may substitute my code or a variation of it to move the options around, and still use playSongs() to play the music.

It looks like the playSongs() function can only run once before the global ctr variable gets out of useful range. If I'm right about that, it could be moved inside the function.

One thing that the existing code does that mine doesn't is to check for duplicates in the target select. That could be included. And I believe you are saying that you want to be able to pull the selected option of both of the first two selects into the third at once. Are you sure? If the user adds one from the first, and one from the second, then removes the one that came from the second, then goes to add a different one from the first, the one from the second that they had just removed would get added again. Unless after adding, the select(s) from which the option(s) came were reset to their first options, which presumable (as in my existing code) do not qualify to be moved.

Another thing, the code from your post doesn't appear to be moving anything. Rather it's copying options.

yes it is copying. I really don't need to check for duplicates either. you got it right that is what I was trying to do. PlaySongs() is independent of the other functions since it only works with sel2 so I don't have to do anything to it.

Since the function is just copying from the other selects I only need two buttons. play and delete, Which will remove a selected option from sel2.

And there will be no problems telling the script which select list to take options from with getElementById or a getElementByClassName function if I should use that, right?

I've got it working with just two select list in Firefox but not in IE. IE is still throwing an error.

HTML Code:

---

<head>
<script language="JavaScript" type="text/javascript">
var NS4 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) < 5);

/*function getElementsByClass(node,searchClass,tag) {
    var classElements = new Array();
    var els = node.getElementsByTagName(tag); // use "*" for all elements
    var pattern = new RegExp('\\b'+searchClass+'\\b');
    for (var i = 0; i < els.length; i++)
        if ( pattern.test(els[i].className) )
            classElements[classElements.length] = els[i];
    return classElements;
}
*/


var s1 = document.getElementById("selM");
var s2 = document.getElementById("sel2");
function deleteOption(s1)
{
 var theIndex = s1.options.selectedIndex;
  if (theIndex != -1){
    s1.options[theIndex] = null;
  }
}

function moveOptions(s1, s2)
{
  var selMLength = s1.options.length;
  for(var i=0; i<selMLength; i++)
  {
    if(s1.options[i].selected)
    {
      if (!addOption(s2, s1.options[i].text, s1.options[i].value)){
        s1.options[i].selected = false; //remove selection if not duplicate and added
      }
    }
  }
 
  if(NS4) history.go(0);
}

function addOption(s2, txt, val){
  //check if the option already exists
  var dupe=false;
  for (var i=0; i<s2.options.length; i++){
    if (s2.options[i].value==val && s2.options[i].text==txt){
      dupe=true;
      break;
    }
  }
  if (!dupe){ //add the option at the end
    s2.options[s2.options.length] = new Option(txt, val);
    setTimeout(function(){s2.options[s2.options.length-1].selected=true;},10); //delay selection in order for the combobox to scroll (if any) to the bottom.
  }
  return dupe;
}







 var ctr=0;
function playSongs(){
  var arr, len;
  var sel = document.forms[0].sel2;
  var defaultLen = 310; //6 mins
  if (ctr<sel.options.length){
    arr = sel.options[ctr].value.split("|");
    if (arr.length>0 && arr[0]){
      len = (Number(arr[1]))? Number(arr[1])*1000:defaultLen*1000; //in milliseconds     
      document.getElementById('music1').innerHTML='<object width="500" height="450" id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject"><param name="URL" value="'+arr[0]+'"><param name="autoStart" VALUE="true"><param name="uiMode" value="full"><param name="currentPosition" vaule="1" ><param name="ShowStatusBar" value="true"  ><embed type="application/x-mplayer2" src="'+arr[0]+'" ShowControls="0" width="300" height="300"></embed></object>';
    }
    ctr++;
    setTimeout("playSongs()", len);
  }
}
</script> </head.

---

HTML Code:

---

<body>

<div id="ChooseSeason" >  <form id="misteriof" action="yourpage.asp" method="post">

           
        <div id="slider">   
            <select name="sel1"  size="13" multiple="multiple" onchange="this.form.sel2.selectedIndex=-1;" id="selM"  class="channels" >
           
        <option  value="|" title="JAC" class="ice">JAC</option>   
<option  class="dark" value="http://www.fileden.com/files/2006/11/20/398972/HIM%20-%20Dark%20Light%20-%2004%20-%20Killing%20Loneliness.mp3|">H.I.M-Wings of a butterfly</option>
<option class="light" value="C:/Users/Talibah/TV on the PC/Jackie Chan Adventures/Season 3/S3E53 Jackie Chan Adventures - Re-Enter the J Team.avi|436">avi</option>
<option value="http://www.fileden.com/files/2006/11/20/398972/Seal%20-%20Kiss%20From%20A%20Rose.mp3|" class="dark">Seal-Kiss from a Rose</option>
<option value="http://www.fileden.com/files/2006/11/20/398972/The%20Alliance%20ft.%20Fabo%20-%20Tattoo%20(Dirty).mp3|" class="light">Alliance-Tattoo </option>
<option value="http://www.fileden.com/files/2006/11/20/398972/Cradle%20Of%20Filth%20-Nymphetamine.mp3|436" class="dark">Cradle of Filth-Nymphetamine</option>
<option value="http://www.fileden.com/files/2006/11/20/398972/Black%20Light%20Burns%20-%20Lie(1).mp3|" class="light">Black Light Burns-Lie</option>
<option value="http://www.fileden.com/files/2006/11/20/398972/Nelly%20Furtado%20-%20Maneater.mp3|" class="dark">Nelly Furtado-Maneater</option>


<option value="|">Em</option>
<option value="|">Em</option>
<option value="|">Em</option>
<option value="|">Em</option>
<option value="|">Em</option>
</select>
<div id="ubuttons">

                       
                        <select name="sel2" size="4"  multiple="multiple" onchange="this.form.sel1.selectedIndex=-1;" id="userChoose">
                       
                        <option value="">Em</option>

                        </select>
                       
               
               
                        <input type="button" value="add"
                        onclick="moveOptions(this.form.sel1, this.form.sel2);" />
                        <input type="button" value="Del"
                        onclick="deleteOption(this.form.sel2);" />
                <input type="button" value="Play" onclick="playSongs()" />
                </div>

                   
</form>  <!--blue trans background--> </div>
</body>

---

Doesn't work here in Firefox, same error again:

Quote:

---

Error: document.getElementById("music1") is null
Line: 74

---

Code:

---

function playSongs(){
  var arr, len;
  var sel = document.forms[0].sel2;
  var defaultLen = 310; //6 mins
  if (ctr<sel.options.length){
    arr = sel.options[ctr].value.split("|");
    if (arr.length>0 && arr[0]){
      len = (Number(arr[1]))? Number(arr[1])*1000:defaultLen*1000; //in milliseconds     
      document.getElementById('music1').innerHTML='<object width="500" height="450" id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject"><param name="URL" value="'+arr[0]+'"><param name="autoStart" VALUE="true"><param name="uiMode" value="full"><param name="currentPosition" vaule="1" ><param name="ShowStatusBar" value="true"  ><embed type="application/x-mplayer2" src="'+arr[0]+'" ShowControls="0" width="300" height="300"></embed></object>';
    }
    ctr++;
    setTimeout("playSongs()", len);
  }
}

---

Moving things around works fine in both IE and Firefox though.