Select interdipendenti

[Grinder]

Io conosco solo questo: http://www.devguru.com/features/know...e/A100209.html e tutti quelli che ho trovato, non sono altro che fratelli di quello. Se provi ad iniziare dal secondo select, non puoi farlo perchè è vuoto! Io invece ho bisogno che tutti e due siano allo stesso livello, e che si possa iniziare indipendentemente sia da uno che dall'altro...uno esclude l'altro

[Mich_]

Nel tuo caso devi chiaramente partire con le due select completamente piene (lato server o codice HTML iniziale). Poi quando fai una selezione in una, vengono "scartate" le opzioni dell'altra non pertinenti.

Dovrai avere un "database" (trasferito al client) in cui ad ogni selezione delle marche corrisponde la lista delle selezioni dell'altra (oppure le selezioni non pertinenti dell'altra) e viceversa.

Quindi avrai bisogno di due matrici (da definire in uno script della head):
var marche = new Array();
marche['Canon'] = new Array('stampanti', 'm.fotografiche', ...);
marche['Philips'] = new Array('televisori', 'monitor', ...);
...

var prodotti = new Array();
prodotti['stampanti'] = new Array('Canon', 'Brother', ...);
...

Poi alla selezione di una select, elimini dall'altra le opzioni che non interessano (e per questo trovi le funzioni gia` pronte).

[Grinder]

Il database ce l'ho, e anche le relative associazioni..dove trovo le funzioni per eliminare gli oggetti non pertinenti? Ma soprattutto, come faccio a dare un valore all'oggetto poi? La limitazione finora era che i select avevano solo valore numerico...

[Mich_]

Posta quello che hai.
Altrimenti dobbiamo reinventarci tutto, e magari poi non capisci.

Serve:
DOCTYPE (if any)
tag <form>
tag <select>
"database"

Il tutto in formato "lato client", cioe` come arriva al browser (niente ASP, PHP o simile).

[Grinder]

Questo è il select dei produttori:

<select name="p" class="select_10" id="p">
<option selected="selected" value="-1">- Produttore -</option>
<option id="0" value="97"> altri produttori</option>
<option id="1" value="F8">1idea</option>
<option id="2" value="G0">1pc</option>
<option id="3" value="13">3com</option>
<option id="4" value="F3">a4tech</option>
<option id="5" value="11">acer</option>
<option id="6" value="AH">ahead</option>
<option id="7" value="27">amd</option>
<option id="8" value="B4">armor</option>
<option id="9" value="AC">artic cooling</option>
<option id="10" value="55">asustek</option>
<option id="11" value="SA">ati/sapphire</option>
<option id="12" value="F1">biostar</option>
<option id="13" value="09">canon</option>
<option id="14" value="CD">cdv</option>
<option id="15" value="03">compaq</option>
<option id="16" value="H4">cooler master</option>
<option id="17" value="47">creative</option>
<option id="18" value="C6">dlink</option>
<option id="19" value="EX">eliox</option>
<option id="20" value="I6">enermax</option>
<option id="21" value="G3">epox</option>
<option id="22" value="08">epson</option>
<option id="23" value="EB">exabyte</option>
<option id="24" value="B0">fast</option>
<option id="25" value="FX">foxconn</option>
<option id="26" value="FR">freecom</option>
<option id="27" value="23">fujitsu</option>
<option id="28" value="D3">hamlet</option>
<option id="29" value="D9">hitachi</option>
<option id="30" value="02">hp</option>
<option id="31" value="IA">i-mate</option>
<option id="32" value="52">imagik</option>
<option id="33" value="59">imation</option>
<option id="34" value="24">intel</option>
<option id="35" value="62">iomega</option>
<option id="36" value="H2">kingston</option>
<option id="37" value="45">lexmark</option>
<option id="38" value="B6">lg electronics</option>
<option id="39" value="10">logitech</option>
<option id="40" value="G8">lonsdale</option>
<option id="41" value="C2">macromedia</option>
<option id="42" value="B3">maxtor</option>
<option id="43" value="28">mcafee</option>
<option id="44" value="64">mge</option>
<option id="45" value="26">microsoft</option>
<option id="46" value="D8">oem</option>
<option id="47" value="44">oki</option>
<option id="48" value="D7">olympus</option>
<option id="49" value="B9">palm</option>
<option id="50" value="36">philips</option>
<option id="51" value="65">pinnacle</option>
<option id="52" value="66">pioneer</option>
<option id="53" value="01">rem</option>
<option id="54" value="88">samsung</option>
<option id="55" value="A9">seagate</option>
<option id="56" value="38">sony</option>
<option id="57" value="B2">sparkle</option>
<option id="58" value="L0">supermicro</option>
<option id="59" value="32">symantec</option>
<option id="60" value="43">tally</option>
<option id="61" value="A6">teac</option>
<option id="62" value="34">tektronix</option>
<option id="63" value="H7">thermaltake</option>
<option id="64" value="H8">tomtom - gps</option>
<option id="65" value="12">toshiba</option>
<option id="66" value="TX">tx</option>
<option id="67" value="69">us-robotics</option>
<option id="68" value="58">verbatim</option>
<option id="69" value="71">waitec</option>
<option id="70" value="L1">western digital</option>
<option id="71" value="91">xerox</option>
<option id="72" value="54">zyxel</option>
</select>

e questo quello delle categorie prodotto:

<select name="c" id="c">
<option selected="selected" value="0">- Categoria Prodotti -</option>
<option id="0" value="26">accessori</option>
<option id="1" value="22">acquisizione video</option>
<option id="2" value="51">alimentatori</option>
<option id="3" value="90">alimentatori server</option>
<option id="4" value="28">borse per computer</option>
<option id="5" value="32">cabinet</option>
<option id="6" value="25">carta, lucidi, etich, buste</option>
<option id="7" value="31">casse, cuffie, microfoni</option>
<option id="8" value="38">consumabili</option>
<option id="9" value="33">controller</option>
<option id="10" value="03">drive floppy</option>
<option id="11" value="43">fax, fotocopiatori</option>
<option id="12" value="18">fotografia</option>
<option id="13" value="35">garanzie rem</option>
<option id="14" value="82">gps</option>
<option id="15" value="01">hard disk</option>
<option id="16" value="81">home multimedia</option>
<option id="17" value="39">joystick, joypad, volanti</option>
<option id="18" value="09">lettori cd, rom e dvd</option>
<option id="19" value="86">lettori dvd, divx, mp3</option>
<option id="20" value="60">lettori mp3</option>
<option id="21" value="41">magnetico</option>
<option id="22" value="11">masterizzatori</option>
<option id="23" value="02">memorie</option>
<option id="24" value="84">memorie flash</option>
<option id="25" value="80">modding</option>
<option id="26" value="36">modem</option>
<option id="27" value="12">monitor</option>
<option id="28" value="08">mouse</option>
<option id="29" value="16">networking</option>
<option id="30" value="83">notebook</option>
<option id="31" value="73">parti di ricambio</option>
<option id="32" value="34">pc</option>
<option id="33" value="74">pen drive</option>
<option id="34" value="04">piastre madri</option>
<option id="35" value="42">porta cd, fd, access. pc</option>
<option id="36" value="29">processori</option>
<option id="37" value="49">rack estraibili, box ext</option>
<option id="38" value="89">raffr. a liquido</option>
<option id="39" value="19">scanner</option>
<option id="40" value="06">schede audio</option>
<option id="41" value="57">schede varie</option>
<option id="42" value="05">schede video</option>
<option id="43" value="17">software</option>
<option id="44" value="13">stampanti</option>
<option id="45" value="30">tappetini e access. mouse</option>
<option id="46" value="07">tastiere</option>
<option id="47" value="77">telefoni</option>
<option id="48" value="79">tv</option>
<option id="49" value="44">unita´ di backup</option>
<option id="50" value="37">ups</option>
<option id="51" value="59">ventole</option>
<option id="52" value="40">videocamere, webcam</option>
<option id="53" value="47">videoproiettori, lavagne</option>
<option id="54" value="87">voip solutions</option>
</select>

Il form invece ha le seguenti proprietà:

<form action="result.asp" method="get" name="query" class="formcompatto" id="query">

[br1]

Ed il legame fra prodotti e produttori dove sta?

Inoltre e' errato assegnare lo stesso id ad oggetti diversi...

ciao

[Grinder]

Il legame è in due tabelle di database...gli array non mi interessa sapere come si creano, è un problema che posso risolvere. L'ID non lo considerare, è una cosa che ho fatto tra le varie sperimentazioni e si può benissimo cambiare.
Quello che mi interessa è il valore invece, perchè è quello che devo passare alla pagina successiva ed è quello che mi crea le relazioni tra le due tabelle di database

[Mich_]

Ma se vogliamo aiutarti, dobbiamo sapere come e` la struttura dei dati che arrivano al client.

Io ti ho fatto una proposta: puoi confermare quella, o proporne una diversa (magari piu` semplice da realizzare da parte del server).

E devi dire che linguaggio usi (DOCTYPE).
Il JS deve adattarsi all'HTML.
Se usi un linguaggio compatibile con IE5 (o, peggio, con NN4) non si puo` usare un JS "moderno"; viceversa se usi XHTML Strict non si puo` usare il linguaggio JS che si usava 4 anni orsono.

[Grinder]

Per la compatibilità prendiamo in considerazione sempre le ultime versioni, quindi da IE6 in poi, possibilmente compatibile anche con Firefox.

Per creare i select uso ASP e quello che hai scritto qui:

Quindi avrai bisogno di due matrici (da definire in uno script della head):
var marche = new Array();
marche['Canon'] = new Array('stampanti', 'm.fotografiche', ...);
marche['Philips'] = new Array('televisori', 'monitor', ...);
...

var prodotti = new Array();
prodotti['stampanti'] = new Array('Canon', 'Brother', ...);

è giustissimo! Questi array però so già come crearli da database, non è un problema.

[Mich_]

OK.

Allora mettici sempre un DOCTYPE all'inizio. Io quindi scrivo per XHTML Transitional, ma il JS va bene anche per lo strict (con gli accorgimenti del caso) e per HTML 4.

<select name="p" class="select_10" id="p" onchange="limita_c(this);">
....
<select name="c" id="c" onchange="limita_p(this);">
...

Il JS:

var marche = new Array();
marche['Canon'] = new Array('stampanti', 'm.fotografiche', ...);
marche['Philips'] = new Array('televisori', 'monitor', ...);
...

var prodotti = new Array();
prodotti['stampanti'] = new Array('Canon', 'Brother', ...);
... 

function limita_c(pp) {
  var ss = pp.form.c;
  var txt = pp.options[pp.selectedIndex].text;
  for(var i=ss.length-1; i>=0; i--) {
    var tt = ss.options[i].text;
    var presente = false;
    for(var j=0; j<marche[txt].length; j++) {
      if(marche[txt][j] == tt) {
        presente = true;
        break;
      }
    }
    if(!presente) ss.options[i] = null;
  }
}

function limita_p(cc) {
  var ss = cc.form.p;
  var txt = cc.options[pp.selectedIndex].text;
  for(var i=ss.length-1; i>=0; i--) {
    var tt = ss.options[i].text;
    var presente = false;
    for(var j=0; j<marche[txt].length; j++) {
      if(prodotti[txt][j] == tt) {
        presente = true;
        break;
      }
    }
    if(!presente) ss.options[i] = null;
  }
}

Non lo ho testato, ed essendo un programma un po' complesso, la probabilita` di bachi e` piuttosto alta.