Area di testo che varia in base al voce selezionata nel menù a tendina

**RIACK** · 15-10-2013, 16:46

Ho un menu a tendina e una area di testo nella quale devo inserire una scritta diversa, a seconda della voce che viene selezionata nel menù a tendina (quindi una cosa "dinamica").

Rimangono solo 2 piccoli particolari da risolvere nel javascript:
1) quando lancio per la prima volta, l'area di testo compare (non dovrebbe esserci e infatti se seleziono la prima voce scompare, ma al primo lancio la visualizzo);
2) adesso al posto di farmi ri-stampare le voci nel menù, devo stampare i corrispondenti testi dei copyright, leggendoli dal file xml....

Al momento il codice che ho è questo:

codice:

<html>    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery-2.0.3.js"></script>
        <script type="text/javascript">
        $(document).ready(function () {
            $('#copyright_titles').change(function () {
                $('#copyright_text').html($( "#copyright_titles option:selected" ).text());
                
                var isFirstSelected = $("#copyright_titles option:first-child" ).is(':selected');
                var isLastSelected = $("#copyright_titles option:last-child" ).is(':selected');


                if(isFirstSelected){
                     $('#copyright_text').hide();
                     return;
                }


                $('#copyright_text').attr("readonly",isLastSelected?false:true);
                $('#copyright_text').val($("#copyright_titles option:selected" ).text());
                $('#copyright_text').show();
            });
        });
        </script>
    </head>
    <body>
        
        <form name="test" action="test.php" method="post">
            <table>
                <tr>
                        <td>Copyright:</td>
                        <td>
                            <select id='copyright_titles'>
                                <?php
                                    $xml = simplexml_load_file('copyrights.xml');
                                    $i = 0;
                                    foreach($xml->copyright as $copyright)
                                    {
                                        $i++;
                                        echo '<option value="copyright'.$i.'">'.$copyright->title.'</option>';
                                    }
                                ?>
                            </select>
                        </td>
                </tr>
                <tr>
                        <td></td><td>
                            <textarea id='copyright_text' rows="6" cols="65"></textarea>
                        </td>
                </tr>
            </table>
        </form>
        
    </body>
</html>

P.S. sia le voci del menù, che la scritta da mettere nell'area di testo, le prendo da un file xml di questo genere:

codice:

<copyrights>
    <copyright>
        <title>free</title>
        <text></text>
    </copyright>
    <copyright>
        <title>copyright1</title>
        <text>text1</text>
    </copyright>
    <copyright>
        <title>copyright2</title>
        <text>text2</text>
    </copyright>
    <copyright>
        <title>copyright3</title>
        <text>text3</text>
    </copyright>
    <copyright>
        <title>other</title>
        <text></text>
    </copyright>
</copyrights>

**widoz83** · 15-10-2013, 17:17

se ho capito quello che desideri implementare, questo dovrebbe fare al caso:

codice:

$(document).ready(function () {
     $('#copyright_titles').change(function (){
          var isFirstSelected = $("#copyright_titles option:first-child" ).is(':selected');
          var isLastSelected = $("#copyright_titles option:last-child" ).is(':selected');
				
          if(isFirstSelected){
               $('#copyright_text').hide();
               return;
          }
				
          $('#copyright_text').attr("readonly",isLastSelected?false:true);
          $('#copyright_text').val($("#copyright_titles option:selected" ).text());
          $('#copyright_text').show();
      });
});

e di default metti un display:none alla textarea

Ciao

**RIACK** · 15-10-2013, 17:36

Originariamente inviata da widoz83

se ho capito quello che desideri implementare, questo dovrebbe fare al caso:

codice:

$(document).ready(function () {
     $('#copyright_titles').change(function (){
          var isFirstSelected = $("#copyright_titles option:first-child" ).is(':selected');
          var isLastSelected = $("#copyright_titles option:last-child" ).is(':selected');
                
          if(isFirstSelected){
               $('#copyright_text').hide();
               return;
          }
                
          $('#copyright_text').attr("readonly",isLastSelected?false:true);
          $('#copyright_text').val($("#copyright_titles option:selected" ).text());
          $('#copyright_text').show();
      });
});

e di default metti un display:none alla textarea

Ciao

Grazie mille! funziona alla grande... rimangono solo 2 piccoli particolari:
1) quando lancio per la prima volta, l'area di testo compare (non dovrebbe esserci e infatti se seleziono la prima voce scompare, ma al primo lancio la visualizzo);
2) adesso al posto di farmi ri-stampare le voci nel menù, devo stampare i corrispondenti testi dei copyright, leggendoli dal file xml....

**widoz83** · 15-10-2013, 17:54

per il primo punto, come ti ho scritto nel post precedente devi mettere display:none alla textarea.
per il secondo punto, non so, dipende...

- quanto è lungo il testo all'interno di ogni tag <text>?
- quanti tag copyright sono previsti?

Se per ogni copyright il testo è corto, potresti dare ad ogni singolo <option> un attributo data-text contentente il testo da andare a leggere dopo tramite jquery. Però già che è un copyright non credo sarà un testo corto.

Altrimenti utilizzare qualche input hidden con il valore del testo o qualche span sempre nascosto, ma così riempiresti il codice di testo che non servirà tutto, visto che dipende da quello che selezioni nella pick-list (e li puoi selezionare un solo valore).

Altra soluzione potrebbe essere interrogare ogni volta il file xml per andare a recuperare il testo che ti interessa.

**RIACK** · 15-10-2013, 18:16

Originariamente inviata da widoz83

per il primo punto, come ti ho scritto nel post precedente devi mettere display:none alla textarea.
per il secondo punto, non so, dipende...

- quanto è lungo il testo all'interno di ogni tag <text>?
- quanti tag copyright sono previsti?

Se per ogni copyright il testo è corto, potresti dare ad ogni singolo <option> un attributo data-text contentente il testo da andare a leggere dopo tramite jquery. Però già che è un copyright non credo sarà un testo corto.

Altrimenti utilizzare qualche input hidden con il valore del testo o qualche span sempre nascosto, ma così riempiresti il codice di testo che non servirà tutto, visto che dipende da quello che selezioni nella pick-list (e li puoi selezionare un solo valore).

Altra soluzione potrebbe essere interrogare ogni volta il file xml per andare a recuperare il testo che ti interessa.

Mi scuso per il punto primo... ho appena messo display:none e ho risolto.

Per il secondo punto invece, non c'è problema a interrogare il file xml... e infatti è proprio quello che devo fare. Mi basta solo sapere come faccio per capire quale opzione è stata selezionata...

**RIACK** · 15-10-2013, 18:47

Ho provato così, ma purtroppo non si può

(basterebbe passare come parametro una variabile javascript a un if in php)

codice:

var copyright_title_selected = $("#copyright_titles option:selected");

                $('#copyright_text').text(
                        <?php
                            foreach($xml->copyright as $copyright)
                            {
                                if(?> copyright_title_selected <?php == $copyright->title)
                                    echo $copyright->title;
                            }
                        ?>
                    );

oppure qualcosa del genere (neanche questo si può fare T_T )

codice:

$(document).ready(function () {            $('#copyright_titles').change(function () {                
                var isFirstSelected = $("#copyright_titles option:first-child" ).is(':selected');
                var isLastSelected = $("#copyright_titles option:last-child" ).is(':selected');
                var copyright_title_selected = $("#copyright_titles option:selected").text();


                if(isFirstSelected) {
                     $('#copyright_text').hide();
                     return;
                }


                $('#copyright_text').attr("readonly",isLastSelected?false:true);
                
                <?php
                foreach($xml->copyright as $copyright) {
                    if(copyright_title_selected == copyright->title) {
                         copyright_title_selected = $copyright->text);
                    }
                }?>
                
                $('#copyright_text').text(copyright_title_selected);
                $('#copyright_text').show();
            });
        });

**widoz83** · 15-10-2013, 19:07

forse un po' di ajax

**RIACK** · 15-10-2013, 19:12

Originariamente inviata da widoz83

forse un po' di ajax

Ovvero? mi tocca cambiare tutto o devo solo aggiungere quel paio di cose per poter accedere a xml dallo script?.. uff... eppure mi pare che manca così poco.. con php posso accederci e prendere tutto quello che mi serve... e dallo script posso sapere la voce selezionata. Mi basta poter far comunicare le 2 cose T_T

P.S. non so che diavolo sia ne come si usa ajax

T_T

**RIACK** · 15-10-2013, 19:23

si può creare una variabile che sia globale, nel senso che è utilizzabile sia in javascript che in php?

in pratica dentro lo script java ho bisogno di aprire un tag php per ciclare una cosa e dentro sto ciclo devo vedere se una variabile dichiarata nello script è uguale a una variabile di php...

oppure devo trovare un modo simile a quello di php, per aprire un xml in javascript...

**widoz83** · 15-10-2013, 20:01

prova a dare un occhio a questo: http://www.html.it/articoli/leggere-...-con-jquery-1/

Discussione: Area di testo che varia in base al voce selezionata nel menù a tendina

Strumenti discussione

Ricerca discussione

Visualizza

Area di testo che varia in base al voce selezionata nel menù a tendina

Permessi di invio