We help IT Professionals succeed at work.
Get Started

JavaScript to sort Listbox

APD Toronto
APD Toronto asked
on
396 Views
Last Modified: 2015-03-06
Hi Experts,

I'm trying to write a JavaScript function that sort items in a listbox by text. The function start at line 82 and ends at 116.

However, this does not work, and when I add a breakpoint at line 98 and 100, I see that arrTextsSorted does indeed sort, but if I break at 103 and 106, I see that the listbox items are not being chnaged. As well, I have not tested the idea association yet between 106 and 111, so if you spot an error, please let me know.

<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            #left{
                float: left;
                margin-left: 50px;
            }  

            .assoc_buttons{
                margin-left: 20px;
                width: 8em;
                margin-right: 20px;
                vertical-align: middle;
            }
            #right{
                clear: both;
                vertical-align: middle;   
            }
        </style>

    </head>
    <body>
      
    <form id="frm" name="frm">
        
        <select name="left" id="left" size="7">
            <option value="5">Location C</option>
            <option value="8">Location E</option>
        </select>
        
        <input type="button" class="assoc_buttons" name="btn_add" value="< Add" onclick="moveItem('right', 'left');"><br>
        <input type="button" class="assoc_buttons" name="btn_add_all" value="<< Add All" onclick="add_all();"><br>
        <input type="button" class="assoc_buttons" name="btn_del" value="Delete >" onclick="del();"><br>
        <input type="button" class="assoc_buttons" name="btn_del_all" value="Delete All >>" onclick="del_all();">

        <select name="right" id="right" size="7">
            <option value="4">Location A</option>
            <option value="6">Location B</option>
            <option value="2">Location D</option>
            <option value="10">Location F</option>
            <option value="1">Location G</option>
            <option value="9">Location H</option>
            <option value="7">Location I</option>
            <option value="3">Location J</option>
            
        </select>
        
    </form>
    
<script type="text/javascript">

    function moveItem(lstFrom, lstTo){
        
        var from = document.getElementById(lstFrom);
        var to = document.getElementById(lstTo);
        
        if (from.selectedIndex == -1){
            alert ("No Locations were selected to be added.");
            return false;
        }
        
        var i = from.selectedIndex;
        var newVal = from.options[i].value;
        var newText = from.options[i].text;
        
        //Remove from item
        from.removeChild(from.options[i]);
        
        //Add to item
        to.options[to.options.length] = new Option(newText, newVal);
        
        //sort from
        reSort(lstTo);        
    }
    
    function reSort(listName){
        
        var lstBox = document.getElementById(listName);
         
        var arrTexts = new Array();
        var arrValues = new Array();
        
        //Copy options to arrays
        for (i = 0; i < lstBox.length; i++){
            arrTexts[i] = lstBox.options[i].text;
            arrValues[i] = lstBox.options[i].value;
        }
        
        //Sort texts and copy to new array
        var arrTextsSorted = new Array();
        arrTextsSorted = arrTexts;
        arrTextsSorted = arrTextsSorted.sort();
        
        for (i = 0; i < lstBox.length; i++){
            
            //list texts in alpha-order
            lstBox.options[i].Text = arrTextsSorted[i];
            
            //Locate text's assoc ID
            for (j = 0; j < arrTexts.length; j++){
                
                if (arrTextsSorted[i].match(arrTexts[j])){
                    lstBox.options[i].value = arrValues[j];
                    break;
                }
            }
        }
            
    }


</script>
          
    </body>  
</html>

Open in new window


Thank you in advance
Comment
Watch Question
Software Engineer
CERTIFIED EXPERT
Commented:
This problem has been solved!
Unlock 1 Answer and 8 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE