Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Sorting In a select Box

Posted on 2003-03-26
6
Medium Priority
?
383 Views
Last Modified: 2012-06-27
Dear Experts
  In my application, i m making use of html and javascript  actually i ve two select boxes say select Box A and Select Box B  and two buttons namely X and Y
 
  In A, i ve 5 names in the alphabetical order..
  When ever i select a particular name and Click the button X , the particular name should
  be transferred to Select Box B.  More than one name can be selected from Select box A and can be transferred to Select Box
  B by clicking the Button X
         Here, the alphabetical order that is being maintained in Select BOx A should also be
 maintained in Select Box B
     
     Similarly , if i select a name from Select Box B and click the button Y
     i should get the name transferred from B to A
     again the alphabetical order should b maintained
     
     Can any one provide a solution for this.
     
     regards
     karthickkrishnan
 
   
0
Comment
Question by:karthickkrishnan
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 9

Expert Comment

by:nimaig
ID: 8215687
You may call this method every time when you move a option from one SelectBox to another. Call this method for the selectbox to which a new option was added.


//Generic function that is used to sort the options array of the select box
function SelectTextSort(obj) { // sort by text
 var N=obj.options.length;
 for (var i=0;i<N-1;i++) {
   for (var j=i+1;j<N;j++) {
     if ( obj.options[i].text > obj.options[j].text ) {
       var i1= (obj.options[i].selected == true ) ? true : false
       var j1= (obj.options[j].selected == true ) ? true : false
       var q1 = obj.options[j].text;
       var q2 = obj.options[j].value;
       obj.options[j].text  = obj.options[i].text;
       obj.options[j].value = obj.options[i].value;
       obj.options[i].text  = q1;
       obj.options[i].value = q2;
       obj.options[i].selected = (j1 && true ) ? true : false
       obj.options[j].selected = (i1 && true ) ? true : false
     }
   }
 }
 return true
}
0
 
LVL 1

Expert Comment

by:AlbertoFrog
ID: 8215920
Alternatively, since you know that the items in the list are already in alphabetical order, you don't need to sort the whole list.

It passes the index from the first list and then copies the data from that into the correct position in the second list.

Alberto

<HTML>

<BODY>

<FORM>
<SELECT name="sel">

</SELECT>

<SELECT name="sel2">
     <OPTION value="1">one</OPTION>
     <OPTION value="2">two</OPTION>
     <OPTION value="3">three</OPTION>
     <OPTION value="4">four</OPTION>
</SELECT>
<INPUT type="button" onclick=add(document.forms[0].sel2.selectedIndex) value="Add"/>
</FORM>
<SCRIPT>
     function add(index){

          //This just cuts down on code          
          var opts = document.forms[0].sel.options;
          var opts2 = document.forms[0].sel2.options;
         
          text = opts2[index].text;
          value = opts2[index].value;

          //Create the new option
          ins = new Option(text, value);    
         
          //Don't need to bother searching if it's an empty select
          if(opts.length>0){
               i=0;
               found=false;

               //Find the first item that's alphabetically after our new item
               while(i<opts.length && found==false){
                    if(text<opts[i].text)
                         found=true;
                    i++;
               }

               //Step back one if it's not going on the end
               if(found==true) i--;

               //Shift them all down one
               for(j=i;j<=opts.length;j++){
                    ext = opts[j];
                    opts[j] = ins;
                    ins = ext;
               }
          } else {
               opts[0] = ins;
          }
     }
     
</SCRIPT>
</BODY>
</HTML>
0
 

Expert Comment

by:elvin226
ID: 8215921
you have these 2 select boxes and 2 buttons:

<form name=form>
<select name=selectA size=5 multiple>
  <option value=1>A</option>
  <option value=2>B</option>
  <option value=3>C</option>
  <option value=4>D</option>
  <option value=5>E</option>
</select>
<select name=selectB size=5 multiple>
</select>
<input type=button value="x" onclick=transfer('A')>
<input type=button value="y" onclick=transfer('B')>
</form>

here is the function that will do the trick:

  function transfer(s1)
  {
    s2 = (s1 == 'A' ? 'B' : 'A');  
    sIndex = form.elements['select'+s1].selectedIndex;
    if (sIndex >= 0)
    {
      elem = document.createElement("option");
      elem.text = form.elements['select'+s1].options[sIndex].outerText;
      elem.value = form.elements['select'+s1].options[sIndex].value;
      i = 0;
      while (i < form.elements['select'+s2].options.length && 
             elem.value > form.elements['select'+s2].options[i].value) i++;
      form.elements['select'+s2].options.add(elem,i);
      form.elements['select'+s1].options.remove(sIndex);
    }
  }


Elvin :)

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 1

Expert Comment

by:AlbertoFrog
ID: 8215924
By the way, in the example code they're added in alphabetical order, not numerical order.

A
0
 

Accepted Solution

by:
elvin226 earned 80 total points
ID: 8216027
i forgot that multiple selection is allowed. here's the correct code:

<html>

<script language=javascript>

  function transfer(s1)
  {
    s2 = (s1 == 'A' ? 'B' : 'A');
   
    for (i=0; ;i++)
    {
      if (form.elements['select'+s1].options[i] == null) return;
      if (form.elements['select'+s1].options[i].selected)
      {
        elem = document.createElement("option");
        elem.text = form.elements['select'+s1].options[i].outerText;
        elem.value = form.elements['select'+s1].options[i].value;
        j = 0;
        while (j < form.elements['select'+s2].options.length && 
             elem.value > form.elements['select'+s2].options[j].value) j++;
        form.elements['select'+s2].options.add(elem,j);
        form.elements['select'+s1].options.remove(i);
        i--;
      }
    }
  }

</script>

<body>
<form name=form>
<table cellpadding=5>
  <tr>
    <td>
      <select name=selectA size=5 multiple>
        <option value=1>A</option>
        <option value=2>B</option>
        <option value=3>C</option>
        <option value=4>D</option>
        <option value=5>E</option>
      </select>
    </td>
    <td>  
      <select name=selectB size=5 multiple>
      </select>
    </td>
  </tr>
  <tr><td><input type=button value="x" onclick=transfer('A')></td>
      <td><input type=button value="y" onclick=transfer('B')></td>
  </tr>
</table>
 
</form>
</body>
</html>
0
 

Author Comment

by:karthickkrishnan
ID: 8222746
Dear Elvis,
 Thanks a lot for your solution. They were really helpful
and it has solved my problem to a great extent.
Thanks once again.
Hope to get nice solutions like this from you always

regards
karthickkrishnan
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

715 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