Innazitutto perchè pillola "collaborativa?"
Perchè come vi spiegherò in seguito questo codice ha un bug intrinseco che non sono riuscito a correggere in un mese. Confido pertanto nei forumisti per debuggare il codice
Un gruppo di select interdipendenti contengono tutte gli stessi valori. Lo script che ho elaborato consente di volta in volta la scelta di una opzione e automaticamente, tale scelta viene esclusa da tutte le altre.
Questo meccanismo può essere utile quando le select vengono usate per esprimere una scala di preferenze o una sorta di classifica. Nell'esempio che vi propongo bisogna scegliere 4 lingue (secondo l'ordine desiderato)
Il codice js è in parte commentato.
Ecco l'esempio: Questo è il file html (copia e incolla)
codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it"> <head> <title>groupSelect - html.it</title> <script type="text/javascript"> var defaultValue = ""; var selectValue = new Array(); function addSelect(id) { selectValue[id] = defaultValue; document.getElementById(id).selectedIndex = 0; } function handleSelect(objSelect) { var selectId = objSelect.id; var currentNode = objSelect.options[objSelect.selectedIndex]; var previousNode = selectValue[selectId]; // Reinserisco l'opzione scelta in precedenza, nelle altre select if ((previousNode.value != undefined) && (previousNode.value != defaultValue)) { insertSelectItem(previousNode, selectId); } // Tolgo l'opzione scelta dalle altre select if ((currentNode.value != undefined) && (currentNode.value != defaultValue)) { removeSelectedItem(currentNode, selectId); } // Inserisco l'oggetto option corrente nell'array selectValue selectValue[selectId] = currentNode; } function insertSelectItem(node, selectId) { var cloneNode = null; node.removeAttribute("selected"); for (var currentId in selectValue) { if (currentId != selectId) { cloneNode = node.cloneNode(true); document.getElementById(currentId).appendChild(cloneNode); alert("Reinserted " + cloneNode.value + " to " + currentId); } } } function removeSelectedItem(node, selectId) { var optGroup; // Ciclo sulle select del gruppo for (var currentId in selectValue) { // alert("checking " + currentId + " with " + selectId); optGroup = document.getElementById(currentId).getElementsByTagName('option'); /* Cancello l'opzione scelta dalle select diverse * da quella corrente. */ if (currentId != selectId) { for (j=0; j<optGroup.length; j++) { if (optGroup[j].value == node.value) { optGroup[j].parentNode.removeChild(optGroup[j]); alert("Removed "+ node.value +" from " + currentId); } } } /* Workaround per Opera 8.50. E' necessario impostare l'attributo * selected in modo esplicito alla option selezionata. */ else { for (j=0; j<optGroup.length; j++) { if (optGroup[j].value == node.value) { optGroup[j].setAttribute("selected", "selected"); alert("Selected "+ node.value +" to " + currentId); } } } } } </script> <script type="text/javascript"> function initSelectGroup() { addSelect("lingua1"); addSelect("lingua2"); addSelect("lingua3"); addSelect("lingua4"); } </script> <style type="text/css"> body, input, select { font-family: verdana; font-size: 10pt; } fieldset { width: 260px; padding: 15px; background: #f0f0f8; } </style> </head> <body onload="initSelectGroup();"> <form action="#"> <fieldset> Lingua 1 <select name="lingua1" id="lingua1" onchange="handleSelect(this)"> <option selected value="">seleziona lingua 1...</option> <option value="italiano">italiano</option> <option value="inglese">inglese</option> <option value="spagnolo">spagnolo</option> <option value="tedesco">tedesco</option> </select> Lingua 2 <select name="lingua2" id="lingua2" onchange="handleSelect(this)"> <option selected value="">seleziona lingua 2...</option> <option value="italiano">italiano</option> <option value="inglese">inglese</option> <option value="spagnolo">spagnolo</option> <option value="tedesco">tedesco</option> </select> Lingua 3 <select name="lingua3" id="lingua3" onchange="handleSelect(this)"> <option selected value="">seleziona lingua 3...</option> <option value="italiano">italiano</option> <option value="inglese">inglese</option> <option value="spagnolo">spagnolo</option> <option value="tedesco">tedesco</option> </select> Lingua 4 <select name="lingua4" id="lingua4" onchange="handleSelect(this)"> <option selected value="">seleziona lingua 4...</option> <option value="italiano">italiano</option> <option value="inglese">inglese</option> <option value="spagnolo">spagnolo</option> <option value="tedesco">tedesco</option> </select> </fieldset> </form> Questo esempio è compatibile con IE6+, FF1+, Opera 8+, Safari 2.0.1 </body> </html>
Eseguendo il codice saranno prodotti degli alert che tengono traccia del flusso seguito.
Apparentemente il codice funziona, tuttavia si produce un bug (in modo random) che avviene in questo modo:
Scelgo un opzione della select, ma all'onchange il testo del valore selezionato non corrisponde. Questo comporta che un certo valore appare nuovamente sulle altre select anche se in realtà è stato appena selezionato. Il bug si riproduce dopo un buon numero di eventi onchange sulle select.
Purtroppo è necessario un testing molto approfondito per accorgersene... sono quasi convinto che la soluzione risieda in una ottimizzazione del codice.
Lascio a voi provare questo codice e spero in un vostro feedback ed una vostra collaborazione.
Rispondi quotando
