Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it
    Registrato dal
    Jun 2002
    residenza
    Umbria
    Messaggi
    46

    Popolare un oggetto select con AJAX e JS

    Salve a tutti.
    Ho una pagina con due oggetti di tipo select (menu a tendina html), l'obiettivo è questo:
    - il primo oggetto contiene una serie di gruppi
    - il secondo oggetto è inizialmente vuoto.
    - quando l'utente sceglie un gruppo vorrei che il secondo menu fosse popolato con gli elementi appartenenti al gruppo selezionato.
    Il tutto, ovviamente, senza rinfrescare o cambiare la pagina.


    Tramite gli eventi sul primo oggetto catturo il gruppo selezionato e lo passo ad uno script php che consulta il database e mi rimanda i relativi elementi. Fin qui tutto bene.

    Quello che vi chiedo è un consiglio sul modo migliore popolare il secondo menu con java script, eventualmente svuotandolo prima dei risultati di una scelta precedente. Sarebbe molto utile trovare un esempio già pronto, ma non ci sono riuscito.

    Grazie.

    PS. = se il quesito è già stato postato mi scuso, non sono riuscito a trovarlo.
    sergio di sunelweb

  2. #2
    L'idea è quella di intercettare l'evento, svuotare la combo dei valori e ripopolarla con i dati che il server ti ha spedito:


    Codice PHP:
    <html>
      <
    script>
        var 
    content = {
          
    "Nomi" : ["Mario""Gianni""Luca"],
          
    "Auto" : ["BMW""AUDI""FIAT"]
        };
        
        function 
    clearSelect(select) {      
            for(var 
    0len select.options.length<  leni++) {
              
    select.remove(0); 
            } 
        }
        
        function 
    changeCat(select) {
          var 
    valuesSelect document.getElementById("values");
          var 
    idx select.selectedIndex;
          
    clearSelect(valuesSelect);
          if(
    idx === 0) {
            return;
          } 
          
    //
          
    var cat select.options[idx].value;
          var 
    values content[cat];
          var 
    opt null;
          for(var 
    0values.lengthi++) {
            
    opt document.createElement('option');
            
    opt.text values[i];
            
    opt.value values[i];
            
    valuesSelect.add(opt);
          }                  
        }
        
      
    </script>
      <body>
        <select id="cat" onchange="javascript:changeCat(this)">
          <option value="Empty">-</option>
          <option value="Nomi">Nomi</option>
          <option value="Auto">Auto</option>            
        </select>
        <select id="values"></select>
      </body>
    </html> 
    La variabile content mi serve per simulare la risposta del server.

    :ciauz

  3. #3
    Utente di HTML.it
    Registrato dal
    Jun 2002
    residenza
    Umbria
    Messaggi
    46
    Perfetto! Grazie antotan e buona serata
    sergio di sunelweb

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 © 2024 vBulletin Solutions, Inc. All rights reserved.