tag select AUTOMOBILI

[napster2world]

Salve,
niente di che sono sicuro che per chi mastica java e programmazione non è un problema difficile, solo che mi sto scervellando perchè mi serve una selezione di Auto per MARCA - MODELLO - ANNO. tipo la selezione di subito
in modo tale che se seleziono un marca tipo fiat mi da tutte le auto fiat e solo quelle, se seleziono bmw mi da quelle e solo quelle.
tre campi select.

Grazie in anticipo.

[cavicchiandrea]

In effetti nulla di difficilissimo (per chi non ha conoscenze difficoltà 6/7), devi trovare due tabelle database "marca" e "modello" (oppure una tabella che contenga entrambe le voci) e documentarti su ajax "classic" o usare ajax di jquery (un po più semplice) dubito che ci sia qualcosa di pronto in rete.

[Enzaccio]

Originariamente inviato da cavicchiandrea
In effetti ..., devi trovare due tabelle database "marca" e "modello" (oppure una tabella ...

e in effetti, non sappiamo proprio dove archivieresti "la roba", se su un Database su un server, se il tutto deve girare solo su un computer locale, se su questo c'è un virtual-server; o se vogliamo addirittura partire da un file di testo. E poi, se vuoi che la seconda SELECT si popoli in base alla selezione operata sulla prima, o compaia da subito con tutti i "nomi" dei modelli (non ripetuti, ovviamente) e in tal caso, ordinati come. Ecc. ecc. ...
E non sappiamo cosa e quanto "mastichi"; quindi rischierò di essere elementare.

Originariamente inviato da cavicchiandrea
dubito che ci sia qualcosa di pronto in rete.

Avevo buttato su dischetto e chissà dov'è, qualcosa di "pronto"-ma-lasciato-incompleto perché cresciuto a dismisura con funzioni aggiuntive; in quanto fatto a titolo di studio ma non avevo necessità pratica di un catalogo di questo tipo.
Vengono fuori delle applicazioni molto interessanti, comunque.

Puoi fare tutto in puro JavaScript, compilando un Array che diventa un piccolo Database.
Un esempio per cominciare a capirci te lo lascio volentieri, con una sola SELECT che tra l' altro, si aggiorna da sola: compilando l' Array-Database, popoli anche la SELECT.

L' Array car contiene 12 articoli (alcuni vuoti !), puoi aggiungere/togliere righe (articoli): il "trucco" dell' indice nella forma [i++] ti consente questa libertà; altrimenti, dovendo essere:

car[0]=new Array('ALFA ROMEO', 'Giulietta', '2012');
car[1]=new Array('ALFA ROMEO', 'L\\' Auto', '2022');
car[2]=new Array('FIAT', '500', '2011');
car[3]=new Array('FIAT', 'Brava', '1998');
car[4]=new Array('FIAT', 'Bravo', '2000');

ti troveresti a dover aggiornare tutti i successivi [numeretti] se ci devi aggiungere in mezzo un' altra ALFA ROMEO.

Ogni articolo dell' Array car contiene a sua volta, un Array.
Con car[1][1] accedo a L' Auto e nota che gli apici che occorrono nella stringa di testo vanno escapati col backslash \ ALTRIMENTI BLOCCHI TUTTO !


Il mio "prototipo" fa uso del document.write(); ma si può sviluppare anche con l' .innerHTML e quasi lo preferisco.
Appare come unicamente uno SCRIPT ma te salvalo con estensione .html e non .js !!!

<script type="text/javascript"> 

var car = new Array(); 
   var i=0;
                 //  MARCA         MODELLO              ANNO

 car[i++]=new Array('ALFA ROMEO', 'Giulietta',         '2012'); 
 car[i++]=new Array('ALFA ROMEO', 'L\\' Auto',          '2022'); 
 car[i++]=new Array('FIAT',       '500',               '2011'); 
 car[i++]=new Array('FIAT',       'Brava',             '1998'); 
 car[i++]=new Array('FIAT',       'Bravo',             '2000'); 
 car[i++]=new Array('FIAT',       'Punto',             '12 a.C.'); 
 car[i++]=new Array('INNOCENTI',  'Elba',   ''); 
 car[i++]=new Array('', '', ''); 
 car[i++]=new Array('Skoda',      'Fabia 1.2 benzina', '2009'); 
 car[i++]=new Array('Skoda',      'Octavia 1.6',       '2010'); 
 car[i++]=new Array('', '', ''); 
 car[i++]=new Array('', '', ''); 


 document.write('' + car.length + ' articoli catalogati 

');

 var option = '<option>- scegli marca -';

 var rilevato = ''
 for(i=0; i<car.length; i++){
     if(car[i][0]!=rilevato){ /*** se già non lo ha messo in lista, procede a farlo ***/
        option = option + '<option>' + car[i][0];
        rilevato=car[i][0];
     };
 };

 alert('si va a popolare la SELECT con:\n\n' + option);

 document.write('<select id="marca">' + option + '<\/select> | <input value="visualizza" type="button" onclick="risulta();">');



 /*** ci prepariamo a costruire la TABLE dei risultati, che verrà popolata al richiamo della  function risulta()  ***/

 var riga = '<thead><tr><th>MARCA<\/th><th>MODELLO<\/th><th>ANNO<\/th><\/tr><\/thead><tbody>';

function risulta(){ 
 var casa = document.getElementById("marca").value; 
 for(i=0; i<car.length; i++){
     if(car[i][0]==casa){
     riga = riga + '<tr><td>' + car[i][0] + '<\/td><td>' + car[i][1] + '<\/td><td>' + car[i][2] + '<\/td><\/tr>';
     };
 };

 document.write('<table border="1" align="center">' + riga + '<\/tbody><\/table>');
 document.close();
 }; 

</script>

Prova a togliere (così vedi a cosa serve) il document.close(); che conclude la funzione; e osserva che la clessidra ...

Sarebbe poi anche possibile fare un' applicazione per compilare l' Array -senza errori - scrivendo in degli INPUT Text.

[napster2world]

Si ho ovviamente dimenticato di dire che conosco solo html css e nozioni di php. Javascript praticamente zero al limite posso cercare di capire un po' le cose grazie alla conoscenza di C++ ovviamente a livello base. Diciamo che lo script che mi hai illustrato è molto efficiente e ben fatto, si vede che sei un professionista. Però putroppo non riesco a capire come popolare le altre select che dovrebbero essere 3 Marca - Modello - Anno.
la prima select che hai fatto tu è perfetta ma come risultato mi da una TABLE che non riesco a portare nella successiva select. Diciamo che comunque la terza select è apparente perchè possiamo mettere dal 1980 al 2012 perciò è una tag che andrebbe ad estraniarsi dalle altre due!!! devo fare un form che praticamente mi invii tramite mail questi dati MARCA MODELLO ANNO e la parte in php ovviamente me la sono fatta subito.. però non riesco a far popolare la seconda select con la scelta della prima... il mio problema è tutto quì.
potresti aiutarmi!! ovviamente ricompilerò tutte le auto io non c'è bisogno che le metta tu... Per la memorizzazione non penso sia necessario caricare la lista in un database , al limite un file .txt o anche scritto direttamente nello script.. mettimi 2 auto di esempio di marche diverse e poi vedrò di arrangiarmi... Grazie

[Cesar]

qui trovi una lista di circa 7000 modelli: https://github.com/n8barr/automotive-model-year-data

ci sono database più completi, ma sono a pagamento, tipo questo.

[Enzaccio]

Originariamente inviato da napster2world
Per la memorizzazione non penso sia necessario caricare la lista in un database , al limite un file .txt o anche scritto direttamente nello script.. mettimi 2 auto di esempio di marche diverse e poi vedrò di arrangiarmi... Grazie

Rimanendo a JavaScript, conviene mantenere l' Array-Database come file indipendente: verrà importato dalla pagina con apposito Tag che troverai nell' esempio successivo.
Questo lo salvi come database.js senza metterci i Tag SCRIPT /SCRIPT:

var car = new Array(); 
 
 var i=0;        //  MARCA  [0]    MODELLO  [1]      ANNO [3]   DETTAGLIO  [3]                           URL FOTO  [4]

 car[i++]=new Array('INNOCENTI',  'Elba',           '1994',   '(da compilare)', ''); 
 car[i++]=new Array('Skoda',      'Fabia',          '2009',   'Fabia 1.2 5-p. alimentazione a benzina', ''); 
 car[i++]=new Array('Skoda',      'Octavia',        '2010', 
                       'Octavia 2.0 Diesel
Octavia, l\\' ammiraglia del marchio Skoda ...', '');

Per il compilatore non sarà dissimile che tenere aggiornato un file di testo, con le poche attenzioni dovute a non guastare la sintassi: escapare gli apici-apostrofo, non andare a capo a casaccio (puoi tranquillamente dopo la virgola che separa i singoli articoli), non "mangiarsi" virgole, apici o parentesi dello schema; tenere una copia di back-up.

QUELLO CHE SI CERCA E QUELLO CHE SI STAMPA - Perché ho aggiunto nuovi campi .

In una forma più elementare, il dato che risponde al criterio di ricerca è lo stesso che stampiamo a video; ed è ciò che abbiamo fatto per la MARCA : il ciclo for scorre tutto l' Array estrapolando i car[n][0] per tutti i numeri possibili di n e quando trova corrispondenza, inserisce quello stesso articolo nella TABLE dei risultati.

Diversa cosa ci suggerisce il MODELLO: non so se nella SELECT vuoi avere solo un 'Fabia' o diverse OPTION per tutti gli allestimenti possibili,
'Fabia 1.2 3p benz'
'Fabia 1.4 5p gpl'
'Fabia 1.6 diesel'
'Fabia 1.6 diesel wagon'
ecc.
e se poi avere il testo dell' OPTION nei risultati ti sia sufficiente.


Per ora invio questo - LA CONNESSIONE FA PENA OGGI E NON SOLO - mi disconnette tutti i momenti sia il mio router, che il forum.

Lasciamo per il momento stare il popolamento automatico delle SELECT, che qui verrebbero aggiornate manualmente:

<!DOCTYPE html>
<html>
<head><title>car's</title>

<script type="text/javascript" src="database.js"></script>

<script type="text/javascript"> 

function ricerca(qualeSelect, indice){ 
 var criterio = document.getElementById(qualeSelect).value; 

 var riga = '<thead><tr><th>MARCA<\/th><th>ANNO<\/th><th>MODELLO<\/th><\/tr><\/thead><tbody>'; 
 for(i=0; i<car.length; i++){
     if(car[i][indice]==criterio){
     riga = riga + '<tr valign="top"><td>' + car[i][0] + '<\/td><td>' + car[i][2] + '<\/td><td>[img]' + car[i][4] + '[/img]' + car[i][3] + 

'<\/td><\/tr>';
     };
 };

 var tabella='<table border="1" align="center">' + riga + '<\/tbody><\/table>';
 document.getElementById("risultati").innerHTML='<hr>' + tabella;
 }; 
</script>

</head><body> 
<div>
<table border="0" align="center"><tbody><tr>
 <td>- esegui la ricerca secondo il criterio che preferisci -<hr>
 <table border="0"><tbody><tr>
  <td><select id="marca">
                        <option>- scegli la marca -
                        <option>ALFA ROMEO
                        <option>FIAT
                        <option>INNOCENTI
                        <option>Skoda
      </select></td><td><input value="cerca" type="button" onclick="ricerca('marca', 0);"></td><td>/\</td>
  <td><select id="modello">
                        <option>- scegli il modello -
                        <option>Elba
                        <option>Fabia
                        <option>Giulietta
                        <option>Octavia
                        <option>500
      </select></td><td><input value="cerca" type="button" onclick="ricerca('modello', 1);"></td><td>/\</td>
  <td><select id="anno">
                        <option>- scegli per anno -
                        <option>1994
                        <option>2000
                        <option>2009
                        <option>2010
                        <option>2011
                        <option>2012
      </select></td><td><input value="cerca" type="button" onclick="ricerca('anno', 2);"></td></tr></tbody>
 </table></td></tr></tbody>
</table>
</div>

<div id="risultati">
</div>

<noscript>Avviso visibile se JavaScript disabilitato sul Browser - l' applicazione non può funzionare.</noscript>

    
</body>
</html>

Faccio uso del .innerHTML= in luogo del document.write(); che scrive con la pagina in formazione o la sovra-scrive se attivato dopo; con innerHTML invece, invii il contenuto a degli Elementi prestabiliti nel contesto della pagina che progetti.

[cavicchiandrea]

Sulla base free dei dati segnalati da Cesar ho sviluppato questo (i dati sono quelli che sono poco affidabili) ma pensare di gestire ipoteticamente 1000/1500 modelli (ad essere ottimisti) in array js la vedo al quanto dura.

[Enzaccio]

Così a naso di cane terone, mi sa' di compito per la squola. Non che con ciò non meriti seguito: una certa complessità c'è, ed è pure interessante.

Nella pratica, la gestione di un JS-Array con diverse centinaia di "pezzi" rimane ancora fattibilissima da parte di una piccola concessionaria, o di un meccanico che vende anche un po' di usato.

Diventa problematico dove c'è ncessità di aggiornamento frequente, ma nemmeno ancora per il volume "statico": del magazzino di un ferramenta che fa decine di vendite al giorno, tutti i giorni.
Allora sarebbe preferibile un' applicazione in C o PHP che ti da' una schermata che fa da catalogo, e un pulsantino aggiungi/togli accanto ad ogni articolo; con possibilità di recupero (errata corrige).


Intanto Andrea fa vedere che l' ANNO sarebbe preferibile gestirlo, o avere la possibilità di gestirlo anche, come "range" da ... anno a ... anno. Due SELECT o una MULTIPLE (si tiene premuto il Maiusc) che però, per il recupero Valori in JS

Domani riposto qualcosa, se interessa ...

[cavicchiandrea]

Ma Enzo non so che dirti io resto della mia idea gestire una mole di dati ipotetici 1000/2000 record (modelli) in una stima per difetto in array js la trovo una sbagliata anche solo per fare delle modifiche in futuro, e non credo che implementerò l'esempio abbozzato perché non mi interessa e poi i dati sono troppo approssimativi (ad esempio per alfa-romeo e fiat ci sono solo due modelli x marchio) ma tu fai come vuoi io mi fermo qui.

[Enzaccio]

Sì, avevo visto: è dal punto di vista automobilistico americano. La mia Skoda a Vapore nemmeno ce n'è una ....
Se andiamo a ricercare tutti i modelli del mondo o quasi, andremo ben oltre le 10.000 voci. Ma probabilmente non è quello che deve fare il nostro amico.
Con la via che ho indicato diciamo che una sorta di QUATTRORUOTE digi-consultabile ce lo può fare, copiando con calma il difficile sarebbe tenere aggiornati i prezzi di tutti gli articoli, ma non il "peso" dell' Array una volta che è stato compilato.

Può anche salvare separati Array in separati file da richiamare con diversi SCRIPT SRC=""
bmw.js
fiat.js
skoda.js
così apre solo quello che serve; l' importante è che in alto e una volta sola ci sia la dichiarazione:

<script type="text/javascript">

var car = new Array();

var i=0;
</script>

Originariamente inviato da cavicchiandrea
Ma Enzo ../.. tu fai come vuoi io mi fermo qui.

Beh anch' io non è che andrò tanto più avanti, ma posto già qualcosa adesso per garantire il ripopolamento faunistico delle SELECT. Ciò ha richiesto l' impianto di un discreto bosco di Array e di cicli FOR, caspita ce n'è anche uno di servizio - immessi - interno alle funzioni:

<!DOCTYPE html>
<html>
<head><title>car's</title>

<script type="text/javascript" src="database.js"></script>
<script type="text/javascript"> 

function popola1(){ 
 var immessi = new Array('- scegli marca -');
 var doppione;
 var options = '<option>- scegli marca -';
 for(i=0; i<car.length; i++){
                
     for(n=0; n<immessi.length; n++){
             if(immessi[n]==car&#91;i&#93;[0]){
                n=immessi.length;
                doppione=true;
         } else {
                doppione=false;
         };
     };
             if(doppione==false){  //alert(immessi)
                immessi[immessi.length]=car&#91;i&#93;[0];
                options = options + '<option value="' + car&#91;i&#93;[0] + '">' + car&#91;i&#93;[0];
             };
 };
 document.getElementById("casa").innerHTML='<select id="marca" onchange="popola2(this.value);">' + options + '<\/select>';
 document.getElementById("casabtn").disabled="";
 }; 

function popola2(marca){ 
 var immessi = new Array('- scegli modello -');
 var doppione;
 for(i=0; i<car.length; i++){
     if(car&#91;i&#93;[0]==marca){
     for(n=0; n<immessi.length; n++){
             if(immessi[n]==car&#91;i&#93;[1]){
                n=immessi.length;
                doppione=true;
         } else {
                doppione=false;
         };
     };
             if(doppione==false){  //alert(immessi)
                immessi[immessi.length]=car&#91;i&#93;[1];
             };
     };
 };
                
                immessi.sort();
 var options = '';
     for(n=0; n<immessi.length; n++){
        options = options + '<option value="' + immessi[n] + '">' + immessi[n];
     };
 document.getElementById("tipo").innerHTML='<select id="modello" onchange="popola3(this.value);">' + options + '<\/select>';
 document.getElementById("tipobtn").disabled="";
 }; 


function ricerca(qualeSelect, indice){ 
 var criterio = document.getElementById(qualeSelect).value; 

 var riga = '<thead><tr><th>MARCA<\/th><th>ANNO<\/th><th>MODELLO<\/th><\/tr><\/thead><tbody>'; 
 for(i=0; i<car.length; i++){
     if(car&#91;i&#93;[indice]==criterio){
     riga = riga + '<tr valign="top"><td>' + car&#91;i&#93;[0] + '<\/td><td>' + car&#91;i&#93;[2] + '<\/td><td>[img]' + car&#91;i&#93;[4] + '[/img]' + car&#91;i&#93;[3] + 

'<\/td><\/tr>';
     };
 };

 var tabella='<table border="0" align="center"><tbody><tr><td>' + '<table border="1">' + riga + '<\/tbody><\/table><\/td><\/tr><\/tbody><\/table>';
 document.getElementById("risultati").innerHTML='<hr>' + tabella;
 }; 
</script>

</head><body onload="popola1();"> 
<div>
<table border="0" align="center"><tbody><tr>
 <td>- esegui la ricerca secondo il criterio che preferisci -<hr>
 <table border="0"><tbody><tr>
  <td id="casa" ><select disabled="disabled"><option>- scegli marca -  </select></td><td><input id="casabtn" value="cerca" type="button" 

onclick="ricerca('marca',  0);" disabled="disabled"></td><td>/\</td>
  <td id="tipo" ><select disabled="disabled"><option>- scegli modello -</select></td><td><input id="tipobtn" value="cerca" type="button" 

onclick="ricerca('modello',1);" disabled="disabled"></td><td>/\</td>
  <td id="epoca"><select disabled="disabled"><option>- scegli l' anno -</select></td><td><input id="epocabtn" value="cerca" type="button" 

onclick="ricerca('anno',   2);" disabled="disabled"></td></tr></tbody>
 </table></td></tr></tbody>
</table>
</div>

<div id="risultati">
</div>

<noscript>L' applicazione non può funzionare perché avete JavaScript disabilitato sul Browser.</noscript>

    
</body>
</html>

immessi.sort(); ti garantisce l' ordinamento alfabetico nella 2.a SELECT.
Ho lasciato in sospeso di sviluppare per ANNO.

P.S.: aspetta, il sort() è case-sensitive "E" viene messo prima di "a"
comunque quel che ho fatto ho fatto, ora devo lasciare: avevo un po' tutto a mente da precedenti studi, come ho detto.
popola1 e popola2 le ho volutamente lasciate affrontare in modo leggermente diverso l' allestimento della var options.

P.S. del P.S.: Adesso è andato tutto in crisi per la i tra le quadre: la prima occorrenza di
if(immessi[n]==car[0]){ devi cambiarla in
if(immessi[n]==car[i][0]){

CONTRORDINE: ho fatto un replace.