Droplist con oggetto a comparsa

**GI89** · 21-04-2012, 13:36

Salve ragazzi vi leggo da una vita ed ora ho bisogno del vostro aiuto!

Sto creando un form e vorrei realizzare un elemento a comparsa simile a QUESTO
nella parte SELEZIONA TIPOLOGIA DI FESTA.

Al posto dei radioButton vorrei poterci mettere una dropDown list che mi faccia comparire quella parte di form,come posso fare?

**criric** · 21-04-2012, 13:59

Ciao,
potresti provare qualcosa di artigianale tipo questo:

Codice HTML:

<html>
    <head>
        <title>cambia contenuti</title>
        <script type="text/javascript">
            function cambiaContenuti(option) {
                
                switch(option) {
                    case '1' :
                        var contenuto = "<p>contenuto 1</p>";
                        document.getElementById('contenuto').innerHTML=contenuto;
                        break;
                    case '2' :
                        var contenuto = "contenuto 2<input type='text' name='pippo'/>";
                        document.getElementById('contenuto').innerHTML=contenuto;
                        break;
                    case '3' :
                        var contenuto = "<span>Ciao contenuto 3</span>";
                        document.getElementById('contenuto').innerHTML=contenuto;
                        break;
                    default:
                        var contenuto = "<span>contenuto0</span>";
                        document.getElementById('contenuto').innerHTML=contenuto;   
                        break;
                }
            }
        </script>
    </head>
    <body>
        <select name="scegli" onchange="cambiaContenuti(this.value)">
            <option value="0"></option>
            <option value="1">contenuto1</option>
            <option value="2">contenuto2</option>
            <option value="3">contenuto3</option>
        </select>
        <div id="contenuto">
            contenuto0
        </div>
    </body>
</html>

**criric** · 21-04-2012, 14:02

la funzione un po piu elegante:

Codice HTML:

<script type="text/javascript">
            function cambiaContenuti(option) {
                var contenuto = "";
                switch(option) {
                    case '1' :
                        contenuto = "<p>contenuto 1</p>";
                        break;
                    case '2' :
                        contenuto = "contenuto 2<input type='text' name='pippo'/>";
                        break;
                    case '3' :
                        contenuto = "<span>Ciao contenuto 3</span>";
                        break;
                    default:
                        contenuto = "<span>contenuto0</span>"; 
                        break;
                }
                document.getElementById('contenuto').innerHTML=contenuto;   
            }
        </script>

**GI89** · 21-04-2012, 14:51

Grazie mille funziona benissimo!

Ps: e se invece volessi un gruppo di campi text con limitazioni?
Mi spiego meglio

esempio. io utente voglio comprare 20 penne,inserisco in una droplist il valore 20 e negli altri text:
text2 5 rosse
text3 5 verdi
text4 5 nere
text5 5 blu

nei text seguenti come puoi capire,il valore non deve superare quello della droplist(20). Ho provato a fare calcoli con php ma non ci risco proprio,qualche suggerimento?

**GI89** · 21-04-2012, 15:39

Originariamente Scritto da criric

la funzione un po piu elegante:

Codice HTML:

<script type="text/javascript">
            function cambiaContenuti(option) {
                var contenuto = "";
                switch(option) {
                    case '1' :
                        contenuto = "<p>contenuto 1</p>";
                        break;
                    case '2' :
                        contenuto = "contenuto 2<input type='text' name='pippo'/>";
                        break;
                    case '3' :
                        contenuto = "<span>Ciao contenuto 3</span>";
                        break;
                    default:
                        contenuto = "<span>contenuto0</span>"; 
                        break;
                }
                document.getElementById('contenuto').innerHTML=contenuto;   
            }
        </script>

Cavolo,lavorandoci sopra mi sono accorto che non mi fa inserire i <select> in contenuto,in pratica uso uno script per la somma delle droplist,finchè inserisco un semplice <select> è tutto ok,ma quando metto <select id""> non funziona,come risolvere?

**criric** · 22-04-2012, 08:41

Cavolo,lavorandoci sopra mi sono accorto che non mi fa inserire i <select> in contenuto,in pratica uso uno script per la somma delle droplist,finchè inserisco un semplice <select> è tutto ok,ma quando metto <select id""> non funziona,come risolvere?

così non ti funziona?

Codice:

case '1' :
    contenuto = "<select name='ciao' id='ciao'>\n";
    contenuto+= "<option value='a'>a</option>\n";
    contenuto+= "<option value='b'>b</option>\n";
    contenuto+= "<option value='c'>c</option>\n";
    contenuto+= "</select>\n";
    break;

posta un po di codice, a volte basta sbagliare una virgola che non funziona piu niente

**GI89** · 22-04-2012, 17:09

Originariamente Scritto da criric

così non ti funziona?

Codice:

case '1' :
    contenuto = "<select name='ciao' id='ciao'>\n";
    contenuto+= "<option value='a'>a</option>\n";
    contenuto+= "<option value='b'>b</option>\n";
    contenuto+= "<option value='c'>c</option>\n";
    contenuto+= "</select>\n";
    break;

posta un po di codice, a volte basta sbagliare una virgola che non funziona piu niente

Con questo codice funziona,il problema è quando vado a richiamare lo script delle somma con

<select id="select1" OnChange="javascript: selectValue(this);">

E' come se fosse uno script dentro lo script,cioè questo è lo script di somma:

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Somam select</title>
    <script type="text/javascript">
      function selectValue(caller)
      {
        document.getElementById("txtRisultato").value = parseInt(document.getElementById("select1").value) + parseInt(document.getElementById("select2").value);
      }
    </script>
  </head>
  <body>
    <select id="select1" OnChange="javascript: selectValue(this);">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <select id="select2" OnChange="javascript: selectValue(this);">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <input type="text" value="0" id="txtRisultato" />
  </body>
</html>

Che quando unisco a quello della drop list:

Codice HTML:

<html>
    <head>
        <title>cambia contenuti</title>
        <script type="text/javascript">
      function selectValue(caller)
      {
        document.getElementById("txtRisultato").value = parseInt(document.getElementById("select1").value) + parseInt(document.getElementById("select2").value);
      }
    </script>
      <script type="text/javascript">
            function cambiaContenuti(option) {
                var contenuto = "";
                switch(option) {
                    case '1' :
                        contenuto = "<select id="select1" OnChange="javascript: selectValue(this);">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <select id="select2" OnChange="javascript: selectValue(this);">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <input type="text" value="0" id="txtRisultato" />";
      
                       break;
                    case '2' :
                        contenuto = "<select>ss</select>";

                        break;
                    case '3' :
                        contenuto = "<span>Ciao contenuto 3</span>";
									break;
                    case '4' :
                        contenuto = "<select>ss</select>";
									
                        break;
                    default:
                        contenuto = "<span>contenuto0</span>"; 
                        break;
                }
                document.getElementById('contenuto').innerHTML=contenuto;   
            }
        </script>
    </head>
    <body>
        <select name="num_bambini" id="num_bambini" onChange="cambiaContenuti(this.value)">
            <option value="0">Scegli il numero di bambini</option>
            <option value="1">1</option>
            <option value="1">2</option>
            <option value="1">3</option>
            <option value="1">4</option>
            <option value="1">5</option>
            <option value="1">6</option>
            <option value="1">7</option>
            <option value="1">8</option>
            <option value="1">9</option>
            <option value="1">10</option>
            <option value="2">11</option>
            <option value="2">12</option>
            <option value="2">13</option>
            <option value="2">14</option>
            <option value="2">15</option>
            <option value="2">16</option>
            <option value="2">17</option>
            <option value="2">18</option>
            <option value="2">19</option>
            <option value="2">20</option>
            <option value="3">21</option>
            <option value="3">22</option>
            <option value="3">23</option>
            <option value="3">21</option>
            <option value="3">22</option>
            <option value="3">23</option>
            <option value="3">24</option>
            <option value="3">25</option>
            <option value="3">26</option>
            <option value="3">27</option>
            <option value="3">28</option>
            <option value="3">29</option>
            <option value="3">30</option>
            <option value="3">31</option>
            <option value="3">32</option>
            <option value="3">33</option>
            <option value="3">34</option>
             <option value="3">35</option>
             <option value="4">pi&ugrave; di 35</option>
        </select>
        <input type="text" value="0" id="txtRisultato" />
        <div id="contenuto">
            
        </div>
    </body>
</html>

Non funziona (errore riga 15,cioè la riga di contenuto)

**Nefyt** · 22-04-2012, 17:12

Codice:

contenuto = "<select id="select1" OnChange="javascript: selectValue(this);">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <select id="select2" OnChange="javascript: selectValue(this);">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <input type="text" value="0" id="txtRisultato" />";

LOL, apri e chiudi 100 volte i " utilizza ' per le opzioni come value id e gli altri in modo da non darti errore

**GI89** · 22-04-2012, 17:17

Originariamente Scritto da Nefyt

Codice:

contenuto = "<select id="select1" OnChange="javascript: selectValue(this);">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <select id="select2" OnChange="javascript: selectValue(this);">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <input type="text" value="0" id="txtRisultato" />";

LOL, apri e chiudi 100 volte i " utilizza ' per le opzioni come value id e gli altri in modo da non darti errore

Ma guarda che questo script funziona,è quando devo inserirlo nell'altro che mi da errore

**Nefyt** · 22-04-2012, 17:21

Questa sintassi è errata:

Codice:

contenuto = "<select id="select1" OnChange="javascript: selectValue(this);">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <select id="select2" OnChange="javascript: selectValue(this);">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <input type="text" value="0" id="txtRisultato" />";

Guarda ad esempio come ha fatto criric:

Codice:

contenuto = "<select name='ciao' id='ciao'>\n";
    contenuto+= "<option value='a'>a</option>\n";
    contenuto+= "<option value='b'>b</option>\n";
    contenuto+= "<option value='c'>c</option>\n";
    contenuto+= "</select>\n";

Devi utilizzare ' non " dentro a contenuto

Discussione: Droplist con oggetto a comparsa

Strumenti Discussione

Visualizzazione

Droplist con oggetto a comparsa

Tag per Questa Discussione

Permessi di Scrittura