[JS] Maximaal aantal items selecteren in een lijst

[Barracuda_82]

Ik ben een pagina aan het maken met daarin een aantal selectlijsten heb met een hele berg values erin. Nu is het de bedoeling dat de bezoeker van al die values er maar een paar mag selecteren. Nu heb ik gezocht op internet naar een javascript dat er voor zorgt dat je er altijd maar bijvoorbeeld 4 mag selecteren.

Hier kon ik niks over vinden, dus heb ik zelf maar wat geschreven:

http://home.insiders.nl/johan/select.php

Helaas werkt het alleen in IE een beetje, want daar kan ik 4 items selecteren en als ik dan een 5e probeer te selecteren wordt de eerste weer gedeselecteerd. Alleen in Firefox kan ik er maar 3 selecteren.

En in beide browsers kan ik met behulp van de SHIFT knop gewoon alles selecteren.

Wie weet hier een mooie oplossing voor of kan me vertellen hoe ik dit aan moet pakken, want ik ben out-of-ideas.

[Sappie]

code:

<script type="text/javascript">
    var queue = Array();
    
    function maximaal(maximum, selectId) {
        selectReference = document.getElementById(selectId);
        
        if (queue.length + 1 > maximum) {
            selectReference.options[queue.shift()].selected = false;
        }
        
        for (i = 0; i < selectReference.options.length; i++) {
            if (queue.length < maximum) addItem = true;
            
            if (selectReference.options[i].selected == false) addItem = false;
            else {
                for (j = 0; j < queue.length; j++) {            
                    if (i == queue[j]) addItem = false;
                }
            }
            
            if (addItem == true) {
                queue.push(i);
            }
        }
    }
</script>

Heb heel even zitten pielen (moet nu echt weer aant werk) en wellicht kan je hiermee op weg geholpen worden. Hiermee houdt je een soort van stack bij in de vorm van een array. Het werkt nu als je items blijft selecteren. De inhoud van het array moet echter nog leeg worden gemaakt als er slechts 1 / geen item geselecteerd is.

[ Voor 11% gewijzigd door Sappie op 25-08-2005 14:14 ]

[crisp]

zoiets:

HTML:

<script type="text/javascript">

function maxSelect(select, max)
{
    var c = 0, i = select.options.length;
    while (i--)
    {
        if (select.options[i].selected)
        {
            if (++c > max) select.options[i].selected = false;
        }
    }

}

</script>
<select multiple size="10" onchange="maxSelect(this, 4)">
    <option value="0">Optie 0</option>
    <option value="1">Optie 1</option>
    <option value="2">Optie 2</option>
    <option value="3">Optie 3</option>
    <option value="4">Optie 4</option>
    <option value="5">Optie 5</option>
    <option value="6">Optie 6</option>
    <option value="7">Optie 7</option>
    <option value="8">Optie 8</option>
    <option value="9">Optie 9</option>
</select>

maar het mooist is misschien nog wel bijhouden welke er als eerste geselecteerd werd zodat je FiFo kan doen