form con select a tendina dinamici

tivovi74

Utente Attivo
31 Gen 2012
58
1
8
Ciao ragazzi, ho una domanda per voi che siete più esperti di me e vi assicuro che basta poco io non lo sono affatto.....

ho costruito un form per la ricerca di un immobile in cui l'utente può selezionare vendita o locazione attraverso un menu a tendina e vorrei collegare altri 2 menu (già creati) a tendina in cui appaiano il prezzo min e prezzo max per creare un range di ricerca.
Ovviamente i valori nella select dovrebbero essere diversi, come posso fare per aggiornare i valori nella select a seconda che si volglia acquistare o affittare?

Grazie.
 
Ciao,
potresti provare qualcosa di questo tipo
HTML:
<script type="text/javascript">
    var Vendita = new Array();
    Vendita[0] = "da 0 a 50";
    Vendita[1] = "da 51 a 100";
    Vendita[2] = "da 101 a 150";
    Vendita[3] = "da 151 a 201";
    
    var Locazione = new Array();
    Locazione[0] = "da 0 a 5";
    Locazione[1] = "da 6 a 10";
    Locazione[2] = "da 11 a 15";
    Locazione[3] = "da 16 a 20";
    
    function getSelected(select) {
        // recupero valore selezionato
        return select.options[select.selectedIndex].value;
    }
    
    function getElement(id)  {
        // recupero l'elemento
        return document.getElementById(id);
    }
    function popolaSelect(select,opt) {
        // scelgo l'array
        switch (opt) {
            case '1':
                var arr = Vendita;
                break;
            case '2':
                var arr = Locazione;
                break;
            default:
                return;
                break;
        }
        // azzero le option            
        select.options.length = 1;
        // creo le option in base agli elementi degli array       
        for(var i=0; i<arr.length; i++) {                              
            // creo la option
            select.options[select.options.length] = new Option(arr[i],i);        
        }
    }
</script>

<form action="" method="POST">
    <select name="tipo" id="tipo" onchange="popolaSelect(getElement('prezzi'),getSelected(this))">
        <option value="0"></option>
        <option value="1">Vendita</option>
        <option value="2">Locazione</option>
    </select>
    <select name="scelte" id="prezzi">

    </select>
</form>


Mi ero dimenticato degli apici. Appena aggiunti
 
Ultima modifica:
Grazie, ho provato ad inserire il codice che mi hai girato, ma non succede nulla.
ti posto il codice che ho inserito, per favore potresti aiutarmi nel trovare cosa non va?
lo script di javascript l'ho inserito all'interno del div del form, forse non è quello il posto.....
HTML:
<script type="text/javascript">
    var Vendita = new Array();
    Vendita[0] = "da 0 a 50";
    Vendita[1] = "da 51 a 100";
    Vendita[2] = "da 101 a 150";
    Vendita[3] = "da 151 a 201";
    
    var Locazione = new Array();
    Locazione[0] = "da 0 a 5";
    Locazione[1] = "da 6 a 10";
    Locazione[2] = "da 11 a 15";
    Locazione[3] = "da 16 a 20";
    
    function getSelected(select) {
        // recupero valore selezionato
        return select.options[select.selectedIndex].value;
    }
    
    function getElement(id)  {
        // recupero l'elemento
        return document.getElementById(id);
    }
    function popolaSelect(select,opt) {
        // scelgo l'array
        switch (opt) {
            case 1:
                var arr = Vendita;
                break;
            case 2:
                var arr = Locazione;
                break;
            default:
                return;
                break;
        }
        // azzero le option            
        select.options.length = 1;
        // creo le option in base agli elementi degli array       
        for(var i=0; i<arr.length; i++) {                              
            // creo la option
            select.options[select.options.length] = new Option(arr[i],i);        
        }
    }
</script>
  <form id="ricerca" name="ricerca" method="post" action="http://www.faispazio.it/provaricerca.php" class="tabellaform">   
    <table width="500" border="0" cellspacing="1">
  <tr>
    <td width="100"><label for="tipologia">Tipologia:</label></td>
    <td width="140"> <select name="tipologia" size="1" id="tipologia" tabindex="1" title="tipologia">
        <option selected="selected">tutte</option>
        <option value="abitazione">abitazione</option>
        <option value="ufficio">ufficio</option>
        <option value="negozio">negozio</option>
        <option value="magazzino">magazzino</option>
        <option value="box">box auto</option>
      </select></td>
    <td width="100"><label for="zona">Zona:</label></td>
    <td width="140"><select name="zona" size="1" id="zona" tabindex="2" title="zona">
      <option selected="selected">tutte</option>
      <option value="centro storico">centro storico</option>
      <option value="zona universitaria">zona universitaria</option>
      &nbsp;</select></td>
  </tr>
  <tr>
    <td><label for="mq">Metri quadri:</label></td>
    <td><input name="mq" type="text" id="mq" tabindex="3" title="mq" size="10" maxlength="10" /></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td><label for="contratto">Tipo contratto:</label></td>
    <td><select name="contratto" id="contratto" onchange="popolaSelect(getElement('prezzi'),getSelected(this))">
        <option value="0"></option>
        <option value="1" selected="selected">Vendita</option>
        <option value="2">Locazione</option>
    </select></td>
    <td><label for="prezzo">Prezzo:</label></td>
    <td><select name="prezzo" id="prezzi">
    </select></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><input name="submit" type="submit" id="submit" tabindex="6" title="submit" value="invia" /></td>
  </tr>
</table>
</form>
 
avevo fatto una modifica

devi mettere gli apici sui numeri nello switch

prova a ricopiare il codice o aggiungili a mano
 
Grazie mille, funziona.
ora proverò ad adeguarlo meglio, perchè avevo fatto piccoli cambiamenti.....
Spero di non doverti disturbare più.
 

Discussioni simili