[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Select and sort box

Posted on 2005-04-28
6
Medium Priority
?
476 Views
Last Modified: 2008-02-01
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.....................
0
Comment
Question by:quest_capital
6 Comments
 
LVL 1

Expert Comment

by:fen2009
ID: 13892271
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
 
LVL 6

Expert Comment

by:iscode
ID: 13892539
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
 
LVL 6

Expert Comment

by:iscode
ID: 13892559
let me know if you need the submit the values to another page
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 32

Expert Comment

by:ldbkutty
ID: 13893206
<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
 

Author Comment

by:quest_capital
ID: 13894484
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
 
LVL 6

Accepted Solution

by:
iscode earned 2000 total points
ID: 13895104
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

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question