Aiuto con le select dinamiche

**Shangri-La** · 24-08-2006, 14:58

Ciao a tutti.

Ho già postato nella sezione ASP e mi hanno detto che la cosa potrebbe essere risolta con js...

Spiego il problema
Ho 4 select che devono essere popolate con i valori di una stessa tabella, ad ogni scelta questa tabella dovrebbe essere aggiornata in modo da visualizzarmi i valori non selezionati nelle precedenti select. Esempio:

select 1: popolata da Servizio1 a ServizioN
select 2: popolata da Servizio1 a ServizioN - select 1
select 3: popolata da Servizio1 a ServizioN - select 1 - select 2
select 4: popolata da Servizio1 a ServizioN - select 1 - select 2 - select 3

Il problema è che devo dare la possibilità di rivedere in qualunque momento le scelte...
Cioè, se volessi modificare la 1.a scelta con il Servizio selezionato nella Select 4, dovrei cancellare il valore nella Select 4 così da renderlo disponibile per poterlo scegliere nella Select 1....

imente mi ha suggerito questa soluzione in js:

l'idea è questa

[select1] A B C D
[select2] A B C D
[select3] A B C D
[select4] A B C D

su 1 seleziono B
su 2 provo a selezionare B, non me lo fa selezionare
su 2 seleziono A
su 3 provo a selezionare B, non me lo fa fare
su 3 provo a selezionare A, non me lo fa fare
su 3 seleziono D
su 4 provo a selezionare B, non me lo fa fare
su 4 provo a selezionare A, non me lo fa fare
su 4 provo a selezionare D, non me lo fa fare
su 4 seleziono C

non modifichi le select, ma impedisci che uno possa selezionare alcuni elementi

ovviamente nella pagina ASP che riceve i dati dovrai controllare che nessuno abbia aggirato il controllo verificando che tutte le 4 select abbiano valori DIFFERENTI, e se così non è dare errore

Solo che io non ci capisco un granchè di js, almeno nello strutturare uno script così complesso...e non saprei da dove cominciare, chi può aiutarmi???

Grazie per l'attenzione.

**pietro09** · 24-08-2006, 20:50

guarda se può andare

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">
<head>
    <title>Pagina senza titolo</title>

    <script language="javascript" type="text/javascript">
// <!CDATA[

function valuta(v)
{
    var id = v.id;
    var n = parseInt(id.substr(6), 10);
    var v1 = null;
    var id1 = "";
    
    if(n >= 1 && n < 4)
    {
        for(var i = n + 1; i <= 4; i++)
        {
            id1 = "Select" + i;
            v1 = $(id1);
            v1.disabled = true;
            cancella_lista(v1);
            copia_elementi_non_selezionati(v, v1);
        }
        $("Select" + (n + 1)).disabled = false;
    }
    
}


//da prototype.js
function $() 
{
  var elements = new Array();

  for (var i = 0; i < arguments.length; i++) {
    var element = arguments[i];
    if (typeof element == 'string')
      element = document.getElementById(element);

    if (arguments.length == 1)
      return element;

    elements.push(element);
  }

  return elements;
}

/*--------------------------------------------------------------
//Rimuove l'elemento di value id, da una lista
--------------------------------------------------------------*/
function cancella_elemento(lista, id)
{
	var v1 = lista.options;
	for (var i = v1.length - 1; i >= 0; i--) 
	{
		if(v1[i].value == id) 
		{
			lista.remove(i);
		}
	}
}

function cancella_lista(l)
{
	var v1 = l.options;
	for (var i = v1.length - 1; i >= 0; i--) l.remove(i);
}

function copia_elementi_non_selezionati(l1, l2)
{
	var v1 = l1.options;
	var v2 = l2.options;
	for (var i = 0; i < v1.length; i++) 
	{
		if(!v1[i].selected) 
		{
			v2[v2.length] = new Option(v1[i].text, v1[i].value);
		}	
	}

}


// ]]>
    </script>
</head>
<body>
    <select id="Select1" size="4" onchange="valuta(this);">
        <option value="0">A</option>
        <option value="1">B</option>
        <option value="2">C</option>
        <option value="3">D</option>
    </select>
    

    <select id="Select2" size="4" disabled="disabled" onchange="valuta(this);">
        <option value="0">A</option>
        <option value="1">B</option>
        <option value="2">C</option>
        <option value="3">D</option>
    </select>
    

    <select id="Select3" size="4" disabled="disabled" onchange="valuta(this);">
        <option value="0">A</option>
        <option value="1">B</option>
        <option value="2">C</option>
        <option value="3">D</option>
    </select>
    

    <select id="Select4" size="4" disabled="disabled" onchange="valuta(this);">
        <option value="0">A</option>
        <option value="1">B</option>
        <option value="2">C</option>
        <option value="3">D</option>
    </select>
    
</body>
</html>

**Shangri-La** · 25-08-2006, 10:56

Grazie Pietro.
Lo script di per se funziona, ma quando ritorno su una select per effettuare un'altra scelta, mi azzera quelle successive (o almeno mi seleziona il primo elemento disponibile della list option) che quindi devono essere riselezionate...

Io non saprei da dove cominciare per modificarlo, a malapena ho capito cosa fa lo script...

Ciao e ancora grazie per l'aiuto!

**pietro09** · 25-08-2006, 11:05

Io non conosco la logica ed ho provato ad inventare
1) all'inizio mi compare una select con nessuna selezione. Tutte le altre sono invisibili

2) appena seleziono un elemento, mi rende visibile la select successiva con solamente gli elementi non selezionati dal precedente

... e così di seguito

se modifico la selezione del primo, sconvolgo la selezione dei rimanenti, perciò ho optato per questa soluzione a sequenza.

di più non so

Discussione: Aiuto con le select dinamiche

Strumenti discussione

Ricerca discussione

Visualizza

Aiuto con le select dinamiche

Permessi di invio