Etwas Java script

[Silke]

Ist nicht von mir aber vielleicht nützlich

Sometimes you want to be able to populate a select field in an html page dynamically, and add and remove elements. You might also want to be able to sort such a list by its entries.

The following JavaScript functions allow for adding, removing and editing entries in a select field.

function addEntryToList(text, value, list) {
    var newOpt = new Option( text, value, false, false );
    var theList = document.forms[0].elements

;
    theList[ theList.length ] = newOpt;
}
 
function removeEntryFromList(index, list) {
    var theList = document.forms[0].elements
;
    list

[index] = null;
}
 
function editEntryInList(index, list, newText, newValue) {
    var theList = document.forms[0].elements

;
    list

[index].text = newText;
    list[index].value = newValue;
}

These three functions are quite straight forward, nothing surprising there. You might want to pad them, maybe pass in the element directly, maybe pass in form name and index. This would allow you to, for example, create a set of two adjacent select fields whose elements you could move between them.

You could even go through the select field itself and find the entries that match.

function findMatchesInList(list, regExpToMatch) {
    var matches = new Array();
    var theList = document.forms[0].elements

;
    for( int i = 0; i < theList.length; i++ ) {
        if( theList

.text && theList.text.match( regExpToMatch ) ) {
            matches.push( theList );
            //     indices: matches.push( i )
            // new options: matches.push( new Option( theList.text, theList.value, false, false) )
        }
    }
    return matches;
}
 
// Find all the entries that match: '*moo*':
var matchArray = findMatchesInList( 'mylist', /moo/ );

Another thing you might want to do is move entries in your list up and down. This, again, is quite straight forward. This time, we get the selection from the list.

function moveUpInList(list) {
    var theList = document.forms[0].elements

;
    var index = theList.selectedIndex;
 
    if( index <= 0 ) { // Nothing or first element selected.
        return;
    }
 
    var selOpt = theList

[index];
    var tempOpt = new Option( selOpt.text, selOpt.value, true, true );
    var tempOpt2 = new Option( theList[ index-1 ].text, theList[ index-1 ].value, true, true );
     
    theList[index] = tempOpt2;
    theList[index-1] = tempOpt;
}
     
function moveDownInList(list) {
    var theList = document.forms[0].elements

;
    var index = theList.selectedIndex;
 
    if( index >= theList.length || index == -1 ) { // Nothing or last element selected.
        return;
    }
 
    var selOpt = theList

[index];
    var tempOpt = new Option( selOpt.text, selOpt.value, true, true );
    var tempOpt2 = new Option( theList[ index+1 ].text, theList[ index+1 ].value, true, true );
     
    theList[index] = tempOpt2;
    theList[index+1] = tempOpt;
}

Now we come to the fun bit. There are a lot of methods how to order a select field, but the one I found most reliable is by using an array to quickly sort the entries.

function sortElementsInList(list) {
    var theList = document.forms[0].elements

;
    var copyOption = new Array();
    var i = 0;
 
    for( i = 0; i < theList.length; i++ ) {
        copyOption

= new Array(theList.text, theList.value);
    }
 
    copyOption.sort();
 
    for( i = theList.length-1; i > -1; i-- ) {
        removeEntryFromList( i, list );
    }
 
    for( i = 0; i < copyOption.length; i++ ) {
        addEntryToList( copyOption[0], copyOption[1], list );
    }
}

If you want a slightly more sophisticated way of sorting the list, you can pass in a function to sort like:

    copyOption.sort( function(a,b) { return a[1]-b[1]; } );

This would sort your list by the options' values, rather than texts.