Visualizzazione dei risultati da 1 a 10 su 10
  1. #1

    menu con caselle a discesa.

    ciao a tutti!!!!!
    volevo realizzare una cartina interattiva per selezionare dei contatti in base alla zona desiderata.
    ho trovato online un esempio su un sito e mi chiedevo se esistesse già qualcosa di simile in javascript.

    vi posto il link:
    http://www.foscarini.it/dealers.php?lang=it

    Praticamente, se clicco per esempio su europa, mi compare la tendina con gli stati.
    Scelgo italia, e mi compare una seconda tendina per le regioni.....
    se continuo nella scelta ho anche un terza tendina con le province...e infine la lista dei contatti.


    Ho provato a cercare qui sul sito ma nn ho trovato nulla di simile.
    Purtroppo non ho la possibilità di usare php o asp e devo arrangiarmi con javascript.
    Qualcuno può darmi una mano?....

    Grazie! ^^
    E' arrabbiato con il mondo, con la propria famiglia e con se stesso. Più che altro è arrabbiato e basta. (Goblin furioso)

    Scaglia abbastanza goblin su un qualsiasi problema e dovresti risolverlo. E in ogni caso ti ritroverai meno goblin trai i piedi. (Scagliaorda goblin)

  2. #2
    mmm senza PHP o ASP la vedo difficile...

    prova a vedere le API di Google Maps se offrono delle funzioni per effettuare le ricerche di cui tu hai bisogno.
    I DON'T Double Click!

  3. #3
    ciao!
    stavo vedendo che forse posso usare il php!!!
    stavo cercando anche qui sul forum....

    avete link? ^^
    E' arrabbiato con il mondo, con la propria famiglia e con se stesso. Più che altro è arrabbiato e basta. (Goblin furioso)

    Scaglia abbastanza goblin su un qualsiasi problema e dovresti risolverlo. E in ogni caso ti ritroverai meno goblin trai i piedi. (Scagliaorda goblin)

  4. #4
    il problema è dove andare a pescare un DB con Continenti, Nazioni, Regioni e Città tutti relazionati. Secondo me, devi vedere se Google Maps offre qualcosa nelle sue API, sennò non saprei proprio cosa consigliarti.
    I DON'T Double Click!

  5. #5
    mmmmmmm....

    diciamo che i dati che servono a me in realtà non sono così tanti.
    sarebbe possibile fare quella cosa delle combo box in javascrtipt, popolandole a mano direttamente nella pagina stessa e all selezione del valore aprire la combo successiva?
    E' arrabbiato con il mondo, con la propria famiglia e con se stesso. Più che altro è arrabbiato e basta. (Goblin furioso)

    Scaglia abbastanza goblin su un qualsiasi problema e dovresti risolverlo. E in ogni caso ti ritroverai meno goblin trai i piedi. (Scagliaorda goblin)

  6. #6
    Allora: spulciando qua e la ho trovato un po di codice; ve lo posto così magari lo vediamo insieme.
    -----------------------------------------------------
    <html>
    <head>
    <title>Popolare SELECT da SELECT</title>
    <script type="text/javascript">
    //Dichiaro l'array myMenu'
    var myMenu = new Array();

    //Definisco le voci del menu'
    myMenu['cat_a'] = new Array(); //Prima categoria
    myMenu['cat_a']['value1'] = 'Prima opzione';
    myMenu['cat_a']['value2'] = 'Seconda opzione';
    myMenu['cat_a']['value3'] = 'Terza opzione';
    myMenu['cat_b'] = new Array(); //Seconda categoria
    myMenu['cat_b']['value4'] = 'Quarta opzione';
    myMenu['cat_b']['value5'] = 'Quinta opzione';
    myMenu['cat_b']['value6'] = 'Sesta opzione';
    myMenu['cat_c'] = new Array(); //Seconda categoria
    myMenu['cat_c']['value7'] = 'Settima opzione';
    myMenu['cat_c']['value8'] = 'Ottava opzione';
    myMenu['cat_c']['value9'] = 'Nona opzione';

    function popola_select(){
    var select = document.forms['myForm'].mySelect; //Recupero la SELECT
    var subselect = document.forms['myForm'].mySubSelect; //Recupero la seconda SELECT

    // Recupero la categoria selezionata
    var cat = select.options[select.selectedIndex].value;

    //Controllo che sia stata selezionata una categoria valida
    if(cat.length != 0){
    //Azzero il contenuto della seconda select
    for (var i = subselect.length - 1; i >= 0; i--)
    subselect.remove(i);

    //Popolo la seconda Select
    for(value in myMenu[cat]){
    //Creo il nuovo elemento OPTION da aggiungere nella seconda SELECT
    var NewOpt = document.createElement('option');
    NewOpt.value = value; // Imposto il valore
    NewOpt.text = myMenu[cat][value]; // Imposto il testo

    //Aggiungo l'elemento option
    try{
    subselect.add(NewOpt, null); //Metodo Standard, non funziona con IE
    }catch(e){
    subselect.add(NewOpt); // Funziona solo con IE
    }
    }

    }
    }
    </script>
    </head>
    <body>
    <form name="myForm" method="post" action="...">
    <select name="mySelect" onChange="popola_select()">
    <option value="">-> Seleziona una Categoria</option>
    <option value="cat_a">Prima Categoria</option>
    <option value="cat_b">Seconda Catgoria</option>
    <option value="cat_c">Terza Categoria</option>
    </select>




    <select name="mySubSelect"></select>
    </form>
    </body>
    </html>
    -----------------------------------------------------

    Questo codice popola una combo in base alla scelta fatta in un'altra. Adesso vedo come sistemare la cosa per avere piu combo box in base alle esigenze.

    Sarebbe carino poter abbinare il tutto ad una sorta di cartina sensibile, dando la possibilità all'utente di scegliere inizialmente almeno lo stato/nazione e rendendo visibili le combo solo dopo questa prima selezione....

    che ne dite? ^^
    E' arrabbiato con il mondo, con la propria famiglia e con se stesso. Più che altro è arrabbiato e basta. (Goblin furioso)

    Scaglia abbastanza goblin su un qualsiasi problema e dovresti risolverlo. E in ogni caso ti ritroverai meno goblin trai i piedi. (Scagliaorda goblin)

  7. #7
    se cerchi nel forum trovi parecchi thread su select autoaggiornanti, devi solo definire una struttura dei dati in modo che quando una select viene popolata la successiva possa utilizzare la selezione precedente per ottenere i dati da mostrare.

    Io di solito uso Ajax per fare una cosa simile:

    SQL
    codice:
    -- Un tipo per il continente che obblighi ad essere uno dei cinque
    CREATE TYPE CONTIN_ENUM AS ENUM ('Europe', 'Asia', 'America', 'Africa', 'Australia');
    -- La tabella per le Nazione
    CREATE TABLE Country(
       id INTEGER PRIMARY KEY,
       name VARCHAR(255) NOT NULL,
    -- qui ci metti gli altri campi,
       continent CONTIN_ENUM NOT NULL
    );
    
    -- Una tabella per la provincia o stato
    CREATE TABLE State(
       id INTEGER PRIMARY KEY,
       name VARCHAR(255) NOT NULL,
    -- qui ci metti gli altri campi
       idcountry INTEGER REFERENCES Country (id)
    );
    
    --Una tabella per le città
    CREATE TABLE City(
       id INTEGER PRIMARY KEY,
       name VARCHAR(255) NOT NULL,
    -- qui ci metti gli altri campi
       idstate INTEGER REFERENCES State (id)
    );
    Questa è una struttura proprio minimale, puoi poi mettere le funzione per il delete a cascade degli provincie se la nazione viene cancellata e delle città se la provincia viene cancellata.

    Poi crei un file PHP che effettui il fetch delle nazioni, uno per le provincie ed uno per le città e fai stampare i risultati in una struttura comprensibile (io ti consiglio JSON).

    un esempio di actor.countries.php:

    Codice PHP:
    <?php
       
    if(!empty($_GET['c'])){
          
    $continent addslashes($_GET['c']);
          
    $continent "'$continent'";
      
          
    $dsn 'pgsql:dbname=testdb;host=127.0.0.1';
          
    $user 'dbuser';
          
    $password 'dbpass';

          try {
             
    $dbh = new PDO($dsn$user$password);
          } catch (
    PDOException $e) {
             echo 
    'Connection failed: ' $e->getMessage();
          }

          
    $query "SELECT id, name FROM Country WHERE continent = $continent";
          echo 
    json_encode($dbh->query($query)->fetchAll(PDO::FETCH_ASSOC));
          exit(
    0);
       }
    echo 
    "[]";
    ?>
    È una cosa veramente banale, uso PDO per connetermi a postgresql e faccio il fetch delle nazioni del continente passato, poi usando la funzione json_encode ritorno quello che ho estratto dal DB (PDO, json_encode è praticamente tutto nativo nelle ultime release di PHP).

    I dati verranno fuori in questa forma:

    codice:
    [
       {
          'id' : 1,
          'name' : 'Italia'
       },
       {
          'id' : 2,
          'name' : 'Germania'
       },
       {
          'id' : 3,
          'name' : 'Francia'
       },
    ...
    ]
    Chiamando il file con una richiesta AJAX ed effettuato l'Eval hai i dati in un formato usato da JS. Usando MooTools fai:

    codice:
    var jsonCountries; //Te ne faccio solo una
    window.addEvent('domready', InitSelect);
    var InitSelect = function(){
       jsonCountries = new Request.JSON({
           'url' : 'path/to/actor.countries.php',
           'onSuccess' : PopulateCountries
       });
       document.id("IDSelectContinent").addEvent('change', function(){
           jsonCountries.get({'c' : this.getSelected().getLast().get('value')});
       });
    };
    
    var PopulateCountries = function(obj){
       var sel = document.id("IDSelectCountries").empty();
       new Element('option', {'value' : ''}).inject(sel).appentText("--- Seleziona una Nazione ---");
       obj.each(function(item){
           new Element('option', {'value' : item.id}).inject(sel).set('html', item.name);
       });
    }
    Nell'HTML metti:

    codice:
    
    
       <label for="IDSelectContinent">Continenti:</label>
       <select name="continent" id = "IDSelectContinent">
          <option value = "">--- Seleziona un Continente ---</option>
          <option value = "Europe">Europe</option>
          <option value = "Asia">Asia</option>
          <option value = "America">America</option>
          <option value = "Africa">Africa</option>
          <option value = "Australia">Australia</option>
       </select>
    </p>
    
    
    
       <label for = "IDSelectCountries">
          Nazioni:
       </label>
       <select name = "country" id = "IDSelectCountries">
          <option value = "">--- Seleziona un Continente Prima ---</option>
       </select>
    </p>
    Spero di aver messo tutto, mi spiace ma non posso proprio provarlo ora. Il resto mi sembra più o meno uguale.
    Le funzioni di MooTools le trovi qui: http://mootools.net/docs/core se clicchi su Request.JSON, Element e DomReady vedi tutto quello che ho usato
    Le funzioni di PDO: http://www.php.net/manual/en/book.pdo.php
    I DON'T Double Click!

  8. #8
    Ma grazie!
    vedo di capirci qualcosa e provo a ricostruire il tutto!!!
    E' arrabbiato con il mondo, con la propria famiglia e con se stesso. Più che altro è arrabbiato e basta. (Goblin furioso)

    Scaglia abbastanza goblin su un qualsiasi problema e dovresti risolverlo. E in ogni caso ti ritroverai meno goblin trai i piedi. (Scagliaorda goblin)

  9. #9
    Ciao!!!!

    Allora, ho dato un occhio a tutto e davvero grazie! sto studiando Ajax!....cominciando dalla guida qui sul sito!

    Il problema però mi rimane...purtroppo verificando tutte le opzioni, non ho la possibilità di usare php almeno al momento e quindi sono nella m...!!!! Alcune funzionalità dovranno essere fruibili anche da un minisito su cd, e quindi non potendo contare sempre su internet e su un web server disponibile......mi attacco!!

    è da ieri sera che mi sbatto per tentare di risolvere, ed ho trovato sul CD del corso Javascript di HTML un esempio di combo dinamica che sto tentando di modificare ma mi sta facendo impazzire:

    allora: ecco il codice di tutta la pagina preso direttamente dal cd!!


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
    <html><head>
    <title>Esempio - Select dinamiche</title>
    <script type="text/javascript">
    /*
    Script tratto dal libro "JavaScript and DHTML Cookbook" - Capitolo 8-13
    Pubblicato da O'Reilly & Associates
    Copyright 2003 Danny Goodman
    Riprodurre questa nota per qualunque riutilizzo del codice.
    */
    var regiondb = new Object()
    regiondb["africa"] = [{value:"102", text:"Cairo"},
    {value:"88", text:"Lagos"},
    {value:"80", text:"Nairobi"},
    {value:"55", text:"Pretoria"}];
    regiondb["asia"] = [{value:"30", text:"Ankara"},
    {value:"21", text:"Bangkok"},
    {value:"49", text:"Pechino"},
    {value:"76", text:"New Delhi"},
    {value:"14", text:"Tokyo"}];
    regiondb["australia"] = [{value:"64", text:"Suva"},
    {value:"12", text:"Sydney"}];
    regiondb["europa"] = [{value:"11", text:"Atene"},
    {value:"35", text:"Francoforte"},
    {value:"3", text:"Londra"},
    {value:"15", text:"Madrid"},
    {value:"1", text:"Parigi"},
    {value:"10", text:"Roma"},
    {value:"6", text:"Stoccolma"},
    {value:"97", text:"San Pietroburgo"}];
    regiondb["noamer"] = [{value:"73", text:"Dallas"},
    {value:"71", text:"Los Angeles"},
    {value:"5", text:"New York"},
    {value:"37", text:"Toronto"}];
    regiondb["suamer"] = [{value:"65", text:"Buenos Aires"},
    {value:"31", text:"Caracas"},
    {value:"66", text:"Rio di Janeiro"}];

    function setCities(chooser) {
    var newElem;
    var where = (navigator.appName == "Microsoft Internet Explorer") ? -1 : null;
    var cityChooser = chooser.form.elements["città"];
    while (cityChooser.options.length) {
    cityChooser.remove(0);
    }
    var choice = chooser.options[chooser.selectedIndex].value;
    var db = regiondb[choice];
    newElem = document.createElement("option");
    newElem.text = "Seleziona una città:";
    newElem.value = "";
    cityChooser.add(newElem, where);
    if (choice != "") {
    for (var i = 0; i < db.length; i++) {
    newElem = document.createElement("option");
    newElem.text = db[i].text;
    newElem.value = db[i].value;
    cityChooser.add(newElem, where);
    }
    }
    }


    </script></head>


    <body>
    <h1>Esempio - Select dinamiche</h1>
    <hr>
    <form name="form">
    Invia la richiesta a:
    <select name="continente" onchange="setCities(this)">
    <option value="" selected="selected">Seleziona un continente:</option>
    <option value="africa">Africa</option>
    <option value="asia">Asia</option>
    <option value="australia">Australia/Oceania</option>
    <option value="europa">Europa</option>
    <option value="noamer">Nord America</option>
    <option value="suamer">Sud America</option>
    </select>_
    <select name="città">
    <option value="" selected="selected">Seleziona una città:</option>
    </select>
    </form>
    </div>
    </body></html>



    Io vorrei che le caselle combo dinamiche fossero nell'ordine:

    Continente -> Stato -> Regione -> Provincia.
    Non so come gestire la cosa.

    Mi potreste dare una mano nell'inserimento anche solo dello stato così mi regolo metto su il resto?

    Grazie mille!!!
    E' arrabbiato con il mondo, con la propria famiglia e con se stesso. Più che altro è arrabbiato e basta. (Goblin furioso)

    Scaglia abbastanza goblin su un qualsiasi problema e dovresti risolverlo. E in ogni caso ti ritroverai meno goblin trai i piedi. (Scagliaorda goblin)

  10. #10
    beh, regiondb è un oggetto che ha per chiave il continente e per valore un array di oggetti (ed ogni oggetto dell'array contiene una chiave value con un numero e text con il nome della Città).

    Devi modificare quello in modo da avere una struttura più completa oppure 3 strutture:
    codice:
    var continentdb = {
       "Africa" : ["Sierra Leone", "Madagascar", ...], //Le nazioni in Africa
       "Europa" : ["Italia", "Francia", "Germania", ...], //Le nazioni in Europa
       ... //Altri contienenti
    };
    
    var countrydb = {
       "Italia" : ["Lombardia", "Veneto", ...], //Le regioni d'Italia
       "Germania" : [...], //Le regioni della Germania
       ... //Ogni nazione le sue regioni
    };
    
    var regiondb = {
       "Lombardia" : ["Milano", ...], //Le Provincie della Lombardia
       ... //Per ogni Regione le sue provincie
    };
    
    var provincedb = {
       "Milano" : ["Milano", ...], //Le città nella provincia di Milano
       ... //Per ogni provincia le città che ne fanno parte
    };
    In questo modo quando selezioni una select vai a prendere l'array nell'oggetto corrispondente alla select, usando come chiave il valore della option selezionata.
    I DON'T Double Click!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.