[SOLVED] Double-Listbox Code

August 12, 2009, 02:24 PM

Dan Pinault

Hi all,

In 7.6.9 there seems to be a bug in the Double-Listbox control which is being investigated. Two mis-behaviors are that it automatically moves the first item on the SelectFrom list to the SelectTo list and changing the contents of the SelectFrom list removes all the contents of the SelectTo list.

Meanwhile, I want to create the basic functionality of the double-listbox (just the MoveTo and MoveFrom bits). The javascript for those functions is tucked away in the ibirls_.js file.

Can you point me to a resource where I might find the MoveTo and MoveFrom functions so I can manually add them to my html page?

Thanks!

Dan

This message has been edited. Last edited by: Dan Pinault,

August 13, 2009, 09:17 AM

Mighty Max

Here is some code I modified from Move Items Between 2 ListBoxes.

  
<html>
<head>
<script>
    function MoveItem(ctrlSource, ctrlTarget) {
        var Source = document.getElementById(ctrlSource);
        var Target = document.getElementById(ctrlTarget);

        if ((Source != null) && (Target != null)) {
            while ( Source.options.selectedIndex >= 0 ) {
                var newOption = new Option(); // Create a new instance of ListItem
                newOption.text = Source.options[Source.options.selectedIndex].text;
                newOption.value = Source.options[Source.options.selectedIndex].value;
                
                Target.options[Target.length] = newOption; //Append the item in Target
                Source.remove(Source.options.selectedIndex);  //Remove the item from Source
            }
        }
    }
</script>

</head>
<body>
<table  cellpadding="5" cellspacing="5">              
    <tr>
        <td>
            <select id="listbox1" size="3" style="width: 75px; height: 75px;" multiple="multiple">
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
            </select>
        </td>
        <td align="center" " style="width: 75px; height: 75px;">
		        <div>
                <input onclick="Javascript:MoveItem('listBox1', 'listBox2');" type="button" value="->" />
				</div>
				<div>
                <input onclick="Javascript:MoveItem('listBox2', 'listBox1');" type="button" value="<-"/>
				</div>
        </td>
        <td>
            <select id="listbox2" size="3" style="width: 75px; height: 75px;" multiple="multiple">
                <option value="4">Four</option>
                <option value="5">Five</option>
                <option value="6">Six</option>
            </select>
        </td>
    </tr>                  
</table>
</body>
</html>