Visualizzazione dei risultati da 1 a 4 su 4

Discussione: Aiuto per variazione codice js jQuery

  1. #1
    Utente di HTML.it
    Registrato dal
    Nov 2012
    Messaggi
    20

    Aiuto per variazione codice js jQuery

    Buongiorno, ho necessità di modificare il codice che segue per poter utilizzare più liste select con differenti id. Le voci evidenziate di ogni lista, dovrebbero, pero`, apparire nella medesima textarea incolonnandosi alle precedenti. Potreste dirmi se è possibile e, nel caso, mostrarmi un esempio completo? Grazie mille

    codice:
    <p>
        <select name="selectfield" id="selectfield">
            <option value="" selected>- Select -</option>
            <option value="STS">STS</option>
            <option value="PBN">PBN</option>
            <option value="EUR">EUR</option>
        </select>
    </p>
    
    <textarea style="width:100%" name="info" id="info" cols="20" rows="5"></textarea>
    
      <script
            src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
    
    <script>
    window.onload=function(){
          
    $("#selectfield").on("change", function() {
        var $select = $(this);
        $("#info").val(function(i, val) {
          return val += '\n'+$select.val();
        })
    });
        }
      </script>

  2. #2
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,971
    domanda: che dovrebbe succedere se cambio l'opzione di una select già scelta in precedenza?
    Il dato della textarea si sovrascrive o si aggiunge?

    Nel tuo esempio una nuova selezione aggiunge il valore, quindi io mantengo la stessa logica


    codice:
    <form>    <select>
            <option value="" selected>- Select 1 -</option>
            <option value="STS">STS</option>
            <option value="PBN">PBN</option>
            <option value="EUR">EUR</option>
        </select>
        <select>
            <option value="" selected>- Select 2 -</option>
            <option value="VAL1">VAL1</option>
            <option value="VAL2">VAL2</option>
            <option value="VAL3">VAL3</option>
        </select>
        <select>
            <option value="" selected>- Select 3 -</option>
            <option value="FOO">FOO</option>
            <option value="BAR">BAR</option>
            <option value="BAZ">BAZ</option>
        </select>
    
    
        <textarea id="info" cols="20" rows="5"></textarea>
    </form>
    
    
    
    
    <script>
      var form = document.querySelector('form'),
          text = document.querySelector('textarea');
      
      /* il form resta in ascolto dell'evento change in 
       * fase di risalita dell'evento */
      form.addEventListener('change', function(event) {
        /* chi ha generato l'evento (target)? */
        var target = event.target;
        
        /* il target è una select? */
        if (target.matches('select')) {
          text.textContent = (text.textContent === '')
              ? target.value
              : [text.textContent, target.value].join('\n');
        }
      })
      
    </script>

    Alcune Note

    1) non ho usato jQuery, non mi pareva necessario
    2) non hai strettamente bisogno di aspettare l'evento load della pagina, ti basta avere il codice a fondo pagina quando il dom è stato caricato
    3) non ti serve assegnare un id alle select e a meno che tu non stia inviando i dati di un form non ti serve nemmeno il name.
    4) non ti serve assegnare un eventhandler per ogni select. Puoi registrare l'handler su un contenitore comune a tutte le select e aspettare che in fase di bubbling l'evento risalga (nell'esempio ho usato un form)
    5) non puoi annidare una select in un paragrafo.
    6) Live demo: https://codepen.io/anon/pen/jejzoo?editors=1000
    Ultima modifica di fcaldera; 31-10-2018 a 13:46
    ISSlive , un bot per Telegram per trovare tutti i passaggi visibili della Stazione Spaziale Internazionale.

  3. #3
    Utente di HTML.it
    Registrato dal
    Nov 2012
    Messaggi
    20
    Grazie mille per le utili correzioni, fcaldera. Il codice l'avevo trovato in rete. Ne approfitto per chiederti un'altra cosa, forse un po' piu` complicata: credi che sarebbe possibile far sparire dall'elenco, nella textarea, le voci che venissero deselezionate dall'utente, durante le scelte, perche` ha un ripensamento? Forse chiedo troppo. In ogni caso, mi hai dato un grande aiuto. Queste cose mi servono, in realta`, proprio per un modulo di contatto, quindi il name ci vuole. Tutto gia` funzionante, mi mancava solo questo. Sei stato gentilissimo
    p.s. scusa, aggiungo....ovviamente non si possono deselezionare le voci in select, ma stavo provando lo script anche sui checkbox con scelta multipla e ho visto che funziona, per questo ho fatto la domanda.
    Ultima modifica di Cosina; 31-10-2018 a 14:26

  4. #4
    Utente di HTML.it
    Registrato dal
    Nov 2012
    Messaggi
    20
    Niente, ignora l'ultima domanda. Era pertinente solo utilizzando il primo codice con jQuery. Va benissimo cosi`, grazie ancora fcaldera e buona giornata. Ciao

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