Select and sort box

What are thoughs form like elements that
has two Boxes side by side and you can click on some data element highlight it and move it to the next box and then sort that data element up or down.

An example: When you right click on Internet Explorer tool bar area and got to customize you see were you can add or remove a icon with the buttons between the two boxes and you can sort up or down with the right box.

I'm tring to sort some data that way I have an order field in my database and instead of assigning numbers to each record I would like to use the method described above. All though I'm using ASP it seem like Javascript my accomplish this.....................
quest_capitalAsked:
Who is Participating?
 
iscodeConnect With a Mentor Commented:
ok here is the main page
----------------------------

<script language="JavaScript" type="text/javascript">
<!--

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

function addOption(theSel, theText, theValue)
{
      var newOpt = new Option(theText, theValue);
      var selLength = theSel.length;
      theSel.options[selLength] = newOpt;
}

function deleteOption(theSel, theIndex)
{      
      var selLength = theSel.length;
      if(selLength>0)
      {
            theSel.options[theIndex] = null;
      }
}

function moveOptions(theSelFrom, theSelTo)
{
      
      var selLength = theSelFrom.length;
      var selectedText = new Array();
      var selectedValues = new Array();
      var selectedCount = 0;
      
      var i;
      
      // Find the selected Options in reverse order
      // and delete them from the 'from' Select.
      for(i=selLength-1; i>=0; i--)
      {
            if(theSelFrom.options[i].selected)
            {
                  selectedText[selectedCount] = theSelFrom.options[i].text;
                  selectedValues[selectedCount] = theSelFrom.options[i].value;
                  deleteOption(theSelFrom, i);
                  selectedCount++;
            }
      }
      
      // Add the selected text/values in reverse order.
      // This will add the Options to the 'to' Select
      // in the same order as they were in the 'from' Select.
      for(i=selectedCount-1; i>=0; i--)
      {
            addOption(theSelTo, selectedText[i], selectedValues[i]);
      }
      
      if(NS4) history.go(0);
}

//-->
</script>
<script language="javascript" type="Text/Javascript">
   //<![CDATA[
   function selectall(obj) {
        for (i=0; i<obj.length; i++) {
             obj[i].selected = true;
        }
   }
   
   function up(obj) {
        if (obj.tagName.toLowerCase() != "select" && obj.length < 2)
             return false;
        var sel = new Array();
        for (i=0; i<obj.length; i++) {
             if (obj[i].selected == true) {
                  sel[sel.length] = i;
             }
        }
        var tmptxt = "";
        var tmpval = "";
        for (i in sel) {
             if (sel[i] != 0 && !obj[sel[i]-1].selected) {
                  tmptxt = obj[sel[i]-1].text;
                  tmpval = obj[sel[i]-1].value;
                  obj[sel[i]-1].text = obj[sel[i]].text;
                  obj[sel[i]-1].value = obj[sel[i]].value;
                  obj[sel[i]].text = tmptxt;
                  obj[sel[i]].value = tmpval;
                  obj[sel[i]-1].selected = true;
                  obj[sel[i]].selected = false;
             }
        }
   }
   
   function down(obj) {
        if (obj.tagName.toLowerCase() != "select" && obj.length < 2)
             return false;
        var sel = new Array();
        for (i=obj.length-1; i>-1; i--) {
             if (obj[i].selected == true) {
                  sel[sel.length] = i;
             }
        }
        var tmptxt = "";
        var tmpval = "";
        for (i in sel) {
             if (sel[i] != obj.length-1 && !obj[sel[i]+1].selected) {
                  tmptxt = obj[sel[i]+1].text;
                  tmpval = obj[sel[i]+1].value;
                  obj[sel[i]+1].text = obj[sel[i]].text;
                  obj[sel[i]+1].value = obj[sel[i]].value;
                  obj[sel[i]].text = tmptxt;
                  obj[sel[i]].value = tmpval;
                  obj[sel[i]+1].selected = true;
                  obj[sel[i]].selected = false;
             }
        }
   }
   
   function inarray(v,a) {
        for (i in a) {
             if (a[i] == v) {
                  return true;
             }
        }
   return false;
   }
   //]]>
  </script>


<form method="post" action="selected.asp" onsubmit="selectall(sel2);">
<table border="0">
      <tr>
            <td>
                  <select name="sel1[]" size="10" multiple="multiple" id="sel1" style="width: 100px;">
                  <option value="1">Left1</option>
                  <option value="2">Left2</option>
                  <option value="3">Left3</option>
                  <option value="4">Left4</option>
                  <option value="5">Left5</option>
                  </select>                  
            </td>
            <td>
                  <input type="button" value="up" onclick="up(sel1);" title="Reorder Up" style="padding: 0; margin: 0; width: 22px; height: 22px;" /><br />
      <input type="button" value="dn" onclick="down(sel1);" title="Reorder Down" style="padding: 0; margin: 0; width: 22px; height: 22px;" />
            </td>
            <td align="center" valign="middle">
                  <input type="button" value="-->"
                   onClick="moveOptions(this.form.sel1, this.form.sel2);" /><br />
                  <input type="button" value="<--"
                   onClick="moveOptions(this.form.sel2, this.form.sel1);" />
            </td>
            <td>
                  <input type="button" value="up" onclick="up(sel2);" title="Reorder Up" style="padding: 0; margin: 0; width: 22px; height: 22px;" /><br />
      <input type="button" value="dn" onclick="down(sel2);" title="Reorder Down" style="padding: 0; margin: 0; width: 22px; height: 22px;" />
            </td>
            
            <td>
                  <select name="sel2[]" size="10" multiple="multiple" id="sel2" style="width: 100px;">
                  <option value="1">Right1</option>
                  <option value="2">Right2</option>
                  <option value="3">Right3</option>
                  <option value="4">Right4</option>
                  <option value="5">Right5</option>
                  </select>
                  <input type="submit" name="submit" value="submit" />
            </td>
            
      </tr>
      
      <tr>
            <td>
                  
            </td>
      </tr>
</table>
</form>

and here is selected.asp
-----------------------------
<%
Response.AddHeader "Pragma", "no-cache"
Response.AddHeader "cache-control", "no-store"
%>


<%
For Each item In Request.Form()("sel2[]")
    Response.Write item & "<br />"
Next

%>
0
 
fen2009Commented:
hi,

This the following codes are in javascript which is like the customize toolbar at the IE:
<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!--
var singleSelect = true;  // Allows an item to be selected once only

var sortSelect = true;  // Only effective if above flag set to true

var sortPick = true;  // Will order the picklist in sort sequence


function initIt() {

  var selectList = document.getElementById("SelectList");

  var pickList = document.getElementById("PickList");

  var pickOptions = pickList.options;

  pickOptions[0] = null;  
  selectList.focus();

}


function addIt() {

  var selectList = document.getElementById("SelectList");

  var selectIndex = selectList.selectedIndex;

  var selectOptions = selectList.options;

  var pickList = document.getElementById("PickList");

  var pickOptions = pickList.options;

  var pickOLength = pickOptions.length;

  if (selectIndex > -1) {

    pickOptions[pickOLength] = new Option(selectList[selectIndex].text);

    pickOptions[pickOLength].value = selectList[selectIndex].value;

    if (singleSelect) {

      selectOptions[selectIndex] = null;

    }

    if (sortPick) {

      var tempText;

      var tempValue;

      while (pickOLength > 0 && pickOptions[pickOLength].value < pickOptions[pickOLength-1].value) {

        tempText = pickOptions[pickOLength-1].text;

        tempValue = pickOptions[pickOLength-1].value;

        pickOptions[pickOLength-1].text = pickOptions[pickOLength].text;

        pickOptions[pickOLength-1].value = pickOptions[pickOLength].value;

        pickOptions[pickOLength].text = tempText;

        pickOptions[pickOLength].value = tempValue;

        pickOLength = pickOLength - 1;

      }

    }

  }

}

function delIt() {

  var selectList = document.getElementById("SelectList");

  var selectOptions = selectList.options;

  var selectOLength = selectOptions.length;

  var pickList = document.getElementById("PickList");

  var pickIndex = pickList.selectedIndex;

  var pickOptions = pickList.options;

  if (pickIndex > -1) {

    if (singleSelect) {

      selectOptions[selectOLength] = new Option(pickList[pickIndex].text);

      selectOptions[selectOLength].value = pickList[pickIndex].value;

    }

    pickOptions[pickIndex] = null;

    if (singleSelect && sortSelect) {

      var tempText;

      var tempValue;

      while (selectOLength > 0 && selectOptions[selectOLength].value < selectOptions[selectOLength-1].value) {

        tempText = selectOptions[selectOLength-1].text;

        tempValue = selectOptions[selectOLength-1].value;

        selectOptions[selectOLength-1].text = selectOptions[selectOLength].text;

        selectOptions[selectOLength-1].value = selectOptions[selectOLength].value;

        selectOptions[selectOLength].text = tempText;

        selectOptions[selectOLength].value = tempValue;

        selectOLength = selectOLength - 1;

      }

    }

  }

}



-->

</SCRIPT>

</HEAD>

<BODY onLoad="initIt()">

<TABLE>

<TR>

<TD>

<SELECT NAME="SelectList" ID="SelectList" SIZE="5">

<OPTION VALUE="01sel">Selection 01</OPTION>

<OPTION VALUE="02sel">Selection 02</OPTION>

<OPTION VALUE="03sel">Selection 03</OPTION>

<OPTION VALUE="04sel">Selection 04</OPTION>

<OPTION VALUE="05sel">Selection 05</OPTION>

<OPTION VALUE="06sel">Selection 06</OPTION>

<OPTION VALUE="07sel">Selection 07</OPTION>

<OPTION VALUE="08sel">Selection 08</OPTION>

<OPTION VALUE="09sel">Selection 09</OPTION>

<OPTION VALUE="10sel">Selection 10</OPTION>

</SELECT>

</TD>

<TD>

<INPUT TYPE="BUTTON" VALUE="->" ONCLICK="addIt();"></INPUT>

<BR>

<INPUT TYPE="BUTTON" VALUE="<-" ONCLICK="delIt();"></INPUT>

</TD>

<TD>

<SELECT NAME="PickList" ID="PickList" SIZE="5">

<OPTION VALUE="01sel">Selection 01</OPTION>

</SELECT>

</TD>

</TR>

</TABLE>

</FORM>

</BODY>
</HTML>

tanks,.. hopethe above codes can help...
0
 
iscodeCommented:
try this code it should do what you want

<script language="JavaScript" type="text/javascript">
<!--

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

function addOption(theSel, theText, theValue)
{
     var newOpt = new Option(theText, theValue);
     var selLength = theSel.length;
     theSel.options[selLength] = newOpt;
}

function deleteOption(theSel, theIndex)
{    
     var selLength = theSel.length;
     if(selLength>0)
     {
          theSel.options[theIndex] = null;
     }
}

function moveOptions(theSelFrom, theSelTo)
{
     
     var selLength = theSelFrom.length;
     var selectedText = new Array();
     var selectedValues = new Array();
     var selectedCount = 0;
     
     var i;
     
     // Find the selected Options in reverse order
     // and delete them from the 'from' Select.
     for(i=selLength-1; i>=0; i--)
     {
          if(theSelFrom.options[i].selected)
          {
               selectedText[selectedCount] = theSelFrom.options[i].text;
               selectedValues[selectedCount] = theSelFrom.options[i].value;
               deleteOption(theSelFrom, i);
               selectedCount++;
          }
     }
     
     // Add the selected text/values in reverse order.
     // This will add the Options to the 'to' Select
     // in the same order as they were in the 'from' Select.
     for(i=selectedCount-1; i>=0; i--)
     {
          addOption(theSelTo, selectedText[i], selectedValues[i]);
     }
     
     if(NS4) history.go(0);
}

//-->
</script>
<script language="javascript" type="Text/Javascript">
   //<![CDATA[
   function selectall(obj) {
        for (i=0; i<obj.length; i++) {
             obj[i].selected = true;
        }
   }
   
   function up(obj) {
        if (obj.tagName.toLowerCase() != "select" && obj.length < 2)
             return false;
        var sel = new Array();
        for (i=0; i<obj.length; i++) {
             if (obj[i].selected == true) {
                  sel[sel.length] = i;
             }
        }
        var tmptxt = "";
        var tmpval = "";
        for (i in sel) {
             if (sel[i] != 0 && !obj[sel[i]-1].selected) {
                  tmptxt = obj[sel[i]-1].text;
                  tmpval = obj[sel[i]-1].value;
                  obj[sel[i]-1].text = obj[sel[i]].text;
                  obj[sel[i]-1].value = obj[sel[i]].value;
                  obj[sel[i]].text = tmptxt;
                  obj[sel[i]].value = tmpval;
                  obj[sel[i]-1].selected = true;
                  obj[sel[i]].selected = false;
             }
        }
   }
   
   function down(obj) {
        if (obj.tagName.toLowerCase() != "select" && obj.length < 2)
             return false;
        var sel = new Array();
        for (i=obj.length-1; i>-1; i--) {
             if (obj[i].selected == true) {
                  sel[sel.length] = i;
             }
        }
        var tmptxt = "";
        var tmpval = "";
        for (i in sel) {
             if (sel[i] != obj.length-1 && !obj[sel[i]+1].selected) {
                  tmptxt = obj[sel[i]+1].text;
                  tmpval = obj[sel[i]+1].value;
                  obj[sel[i]+1].text = obj[sel[i]].text;
                  obj[sel[i]+1].value = obj[sel[i]].value;
                  obj[sel[i]].text = tmptxt;
                  obj[sel[i]].value = tmpval;
                  obj[sel[i]+1].selected = true;
                  obj[sel[i]].selected = false;
             }
        }
   }
   
   function inarray(v,a) {
        for (i in a) {
             if (a[i] == v) {
                  return true;
             }
        }
   return false;
   }
   //]]>
  </script>

<form>
<table border="0">
     <tr>
          <td>
               <select name="sel1[]" size="10" multiple="multiple" id="sel1">
               <option value="1">Left1</option>
               <option value="2">Left2</option>
               <option value="3">Left3</option>
               <option value="4">Left4</option>
               <option value="5">Left5</option>
               </select>              
          </td>
          <td>
               <input type="button" value="up" onclick="up(sel1);" title="Reorder Up" style="padding: 0; margin: 0; width: 22px; height: 22px;" /><br />
      <input type="button" value="dn" onclick="down(sel1);" title="Reorder Down" style="padding: 0; margin: 0; width: 22px; height: 22px;" />
          </td>
          <td align="center" valign="middle">
               <input type="button" value="-->"
                onClick="moveOptions(this.form.sel1, this.form.sel2);" /><br />
               <input type="button" value="<--"
                onClick="moveOptions(this.form.sel2, this.form.sel1);" />
          </td>
          <td>
               <input type="button" value="up" onclick="up(sel2);" title="Reorder Up" style="padding: 0; margin: 0; width: 22px; height: 22px;" /><br />
      <input type="button" value="dn" onclick="down(sel2);" title="Reorder Down" style="padding: 0; margin: 0; width: 22px; height: 22px;" />
          </td>
          <td>
               <select name="sel2[]" size="10" multiple="multiple" id="sel2">
               <option value="1">Right1</option>
               <option value="2">Right2</option>
               <option value="3">Right3</option>
               <option value="4">Right4</option>
               <option value="5">Right5</option>
               </select>
          </td>
     </tr>
</table>
</form>


iscode
0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
iscodeCommented:
let me know if you need the submit the values to another page
0
 
ldbkuttyCommented:
<html>
<head>
<script language="JavaScript" type="text/javascript">
var selArray = new Array();
function moveSel(theDir){
 if(theDir=="right"){
  selList1 = document.getElementById("sel1");
  selList2 = document.getElementById("sel2");
  if(selList1.selectedIndex == -1){
    alert("Please make a selection first");
    return false;
  }
 }
 else{
  selList1 = document.getElementById("sel2")
  selList2 = document.getElementById("sel1")
  if(selList1.selectedIndex == -1){
    alert("Please make a selection first");
    return false;
  }
 }
 ct=0;
 for(i=0; i<selList2.options.length; i++){
  selArray[ct] = new Array();
  selArray[ct][0] = selList2.options[i].text;
  selArray[ct][1] = selList2.options[i].value;       
  ct++;
 }      
 for(i=0; i<selList1.options.length; i++){
  if(selList1[i].selected){
   selArray[ct] = new Array();
   selArray[ct][0] = selList1.options[i].text;
   selArray[ct][1] = selList1.options[i].value;            
   ct++;
  }
 }
 selList1.remove(selList1.selectedIndex);      
 selList2.options.length=0;
 selArray.sort();
 for(i=0; i<selArray.length; i++){
  selList2.options[selList2.options.length] = new Option(selArray[i][0], selArray[i][1]);
 }
}
</script>
</head>
<body>
<select id="sel1" size="5">
<option value="aaaa">AAAA</option>
<option value="bbbb">BBBB</option>
<option value="cccc">CCCC</option>
<option value="ffff">FFFF</option>
<option value="kkkk">KKKK</option>
<option value="yyyy">YYYY</option>
</select>
<input type="button" value=">>" onclick="moveSel('right')">
<input type="button" value="<<" onclick="moveSel('left')">
<select id="sel2" size="5">
</select>
</body>
</html>
0
 
quest_capitalAuthor Commented:
fen2009 & ldbkutty
---------------------
Thank but it does not sort up and down


iscode
---------------------
Greate code and yes I would like to know how to submit to anther page via ASP.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.