Small Chaos Incorporated

Home | Back | Contact Us
Networking | PC Support | Request More Info
Language Experience | Projects | Request More Info
Site Development | Web Hosting | Request More Info
Request More Info
Programming | Support | Miscellaneous | Downloads | Legal Resources | Search Engines
Chaos | Contact Us | More Info

Multiple Select Listbox

Thanks to Justinsomnia.org for the inspiration! I was never happy with the blinky javascript versions. Here is my modified version based on the checkbox theory shown on Justinsomnia.org. The checkboxes are hidden and javascript for selecting 'All', 'None', and 'Invert'. I made 'dime' and 'dog' preselected to show what changes need to be made when loading saved values.

You may try out the listbox and review the code below:

All | None | Invert

<style type="text/css">
a.mselect {
color: red;
text-decoration: none;
}

a.mselect:hover {
background: #ff8;
}

div.mselect_container {
    font:13.3px sans-serif;
    width:200px;
    border-left:1px solid #808080;
    border-top:1px solid #808080;
    border-bottom:1px solid #fff;
    border-right:1px solid #fff;
    position:relative;
    left:300px;
}

div.mselect_inner {
    background:#fff;
    overflow:auto;
    width:200px;
    height:90px;
    vertical-align:top;
    border-left:1px solid #404040;
    border-top:1px solid #404040;
    border-bottom:1px solid #d4d0c8;
    border-right:1px solid #d4d0c8;
    position:relative;
    top:0px;
    right:181px;
}
</style>
<script language="javascript">
<!--
function highlight_div(checkbox_node)
{
    label_node = checkbox_node.parentNode;

    if (checkbox_node.checked)
    {
        label_node.style.backgroundColor='#0a246a';
        label_node.style.color='#fff';
    }
    else
    {
        label_node.style.backgroundColor='#fff';
        label_node.style.color='#000';
    }
}

function click_item(item)
{
    item.checked = !item.checked;
    highlight_div(item);
}

function click_elmt(elmt)
{
    if (document.getElementById) {
        list_elmt = document.getElementById(elmt);
    } else {
        list_elmt = document.all[elmt];
    }
    if (list_elmt != null) {
        click_item(list_elmt);
    }
}

function select_all(base_group_name)
{
    var done = false;
    var i = 1;
    var list_elmt;
    while(!done) {
        if (document.getElementById) {
            list_elmt = document.getElementById(base_group_name + i);
        } else {
            list_elmt = document.all[base_group_name + i];
        }
        if (list_elmt != null) {
            if (!list_elmt.checked) {
                click_item(list_elmt);
            }
            i++;
        } else {
            done = true;
        }
    }
}

function select_none(base_group_name)
{
    var done = false;
    var i = 1;
    var list_elmt;
    while(!done) {
        if (document.getElementById) {
            list_elmt = document.getElementById(base_group_name + i);
        } else {
            list_elmt = document.all[base_group_name + i];
        }
        if (list_elmt != null) {
            if (list_elmt.checked) {
                click_item(list_elmt);
            }
            i++;
        } else {
            done = true;
        }
    }
}

function select_invert(base_group_name)
{
    var done = false;
    var i = 1;
    var list_elmt;
    while(!done) {
        if (document.getElementById) {
            list_elmt = document.getElementById(base_group_name + i);
        } else {
            list_elmt = document.all[base_group_name + i];
        }
        if (list_elmt != null) {
            click_item(list_elmt);
            i++;
        } else {
            done = true;
        }
    }
}
// -->
</script>

<div class="mselect_container">
<div class="mselect_inner">
<a href="javascript:select_all('mcb');" class="mselect">All</a> | 
<a href="javascript:select_none('mcb');" class="mselect">None</a> | 
<a href="javascript:select_invert('mcb');" class="mselect">Invert</a>

<label for='mcb1' style='padding-right:3px;display:block;' 
        onClick='click_elmt("mcb1");'>
    <input name='checkbox[]' value='1' type='checkbox' id='mcb1' 
        style="display:none;">dill pickle</label>
        
<label for='mcb2' style='padding-right:3px;display:block;color:#fff;background-color:#0a246a;' 
        onClick='click_elmt("mcb2");'>
    <input name='checkbox[]' value='2' checked type='checkbox' id='mcb2' 
        style="display:none;">dime</label>

<label for='mcb3' style='padding-right:3px;display:block;' 
        onClick='click_elmt("mcb3");'>
    <input name='checkbox[]' value='3' type='checkbox' id='mcb3' 
        style="display:none;">dinosaur</label>

<label for='mcb4' style='padding-right:3px;display:block;color:#fff;background-color:#0a246a;' 
        onClick='click_elmt("mcb4");'>
    <input name='checkbox[]' value='4' checked type='checkbox' id='mcb4' 
        style="display:none;">dog</label>

<label for='mcb5' style='padding-right:3px;display:block;' 
        onClick='click_elmt("mcb5");'>
    <input name='checkbox[]' value='5' type='checkbox' id='mcb5'
        style="display:none;">dove</label>

<label for='mcb6' style='padding-right:3px;display:block;' 
        onClick='click_elmt("mcb6");'>
    <input name='checkbox[]' value='6' type='checkbox' id='mcb6' 
        style="display:none;">dragon</label>

<label for='mcb7' style='padding-right:3px;display:block;' 
        onClick='click_elmt("mcb7");'>
    <input name='checkbox[]' value='7' type='checkbox' id='mcb7' 
        style="display:none;">duck</label>
</div>
</div>


About Us | Site Map | Privacy Policy | Legal Notices | Contact Us
©2003 Small Chaos Incorporated