funzione select concatenate

**frenky7** · 12-06-2011, 23:49

salve scusate so che è un post trito e ri trito..ne ho trovati veramente molti in giro anche qui sul forum... mi servirebbe la funzione per le select concatenate...2 select dove la seconda si popola in base al valore della prima. I valori all'interno sono pochissimi, 3 nella prima e una decina in tutto nella seconda.
Dato che sto usando joomla per il sito, sul libro del componente per i form ho trovato questa funzione ma non so quanto e se può essere giusta..voi sicuramente ne sapete più di me.

codice:

window.addEvent('load', function() {
  var num_argomento = 2;
  // hide all the recipes to start with
  for ( var i = 1; i <= num_argomento; i++ ) 
     $('ch_'+i).setStyle('display', 'none');
  $('argomento').addEvent('blur', function() {
  var argomento = $('argomento').value;
  var optgroup = 0;
  for ( var i = 1; i <= num_argomento; i++ ) {
     if ( i == argomento ) {
       $('ch_'+i).disabled = false;
       $('ch_'+i).setStyle('display', 'block');
     } else {
         $('ch_'+i).disabled = true;
         $('ch_'+i).setStyle('display', 'none');
       }
  }
});
});

html:

codice:

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="label"><span style="vertical-align: middle; color: #F37021;">*</span>Argomento</label>
    <select class="contentbox required field" id="argomento" size="1" title="" name="argomento">
    <option value="">Scegli un argomento </option>
    <option value="Prodotti cliente">Prodotti al Cliente</option>
    <option value="Lavora con noi">Lavora Con Noi</option>
    <option value="Corsi di formazione">Corsi di Formazione</option>
   </select> 
  </div>
  <div class="cfclear"></div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="label"><span style="vertical-align: middle; color: #F37021;">*</span>&nbspServizio</label>
    <select class="contentbox required field" id="select_6" size="1" title="" name="servizio">
     <optgroup label="" id="ch_1" disabled="disabled" >
      <option value="Prodotti cliente">Conferimento d'Incarico</option>
      <option value="Lavora con noi">Consulenza Pignorati</option>
      <option value="Corsi di formazione">Consulenza Personale</option>
      <option value="Corsi di formazione">Consulenza Privata</option>
      <option value="Corsi di formazione">Consulenza Fiscale Internazionale</option>
     </optgroup>
     <optgroup label="" id="ch_2" disabled="disabled" >
      <option value="Friend">Friend</option>
      <option value="Associato">Associato</option>
      <option value="Affiliato">Affiliato</option>
      <option value="Head Hunter">Head Hunter</option>
     </optgroup>
     <optgroup label="" id="ch_3" disabled="disabled" >
      <option value="Corsi di Formazione">Corsi di Formazione</option>
     </optgroup>
    </select>

il codice è sviluppato in modo che le opzioni sono già presenti nell'html e non se le va a creare dinamicamente come ho visto in diverse soluzioni in giro; sono semplicemente disabilitate a seconda della scelta che si fa. Ma evidentemente c'è qualcosa che non va..nella seconda select mi vengono mostrati tutti i risultati e non posso selezionarne nessuno. Sono come bloccati...

Grazie

Francesco

**Enzaccio** · 13-06-2011, 16:55

Non è nemmeno tanto corretto fare affidamento a DISABLED per le OPTION o gli OPTGROUP, poiché IExplorer lo ignora con quegli elementi.
DISABLED rimane affidabile se assegnato alla SELECT e si disabilita tutto il menù.

Lascerei perdere quello script.
Prova il mio, se te la cavi (impari!) con le concatenazioni ' ' + e fai attenzione all' escape di eventuali apostrofi presenti nel testo/codice, come già:

' <option value="Prodotti cliente">Conferimento d\'Incarico</option>' +

(senza il carattere di escape \ che lo precede, ' interferirebbe con gli apici di delimitazione stringa).

codice:

<html><head>
<script>

function populateNext() {
  var firstChoice = document.main.argomento.selectedIndex;
alert('hai selezionato l\\' opzione ' + firstChoice); //poi questa riga la togli

  var theContainer = document.getElementById("seldiv");

     if ( firstChoice == 0 ) {
       theContainer.innerHTML = '<select id="select_6" size="1" name="servizio" disabled="disabled"><option>- - - - - - -</option></select>'
     } else {
     if ( firstChoice == 1 ) {
       theContainer.innerHTML = 
     '<select id="select_6" size="1" name="servizio">' +
     '<optgroup label="" id="ch_1">' +
     ' <option value="Prodotti cliente">Conferimento d\\'Incarico</option>' +
     ' <option value="Lavora con noi">Consulenza Pignorati</option>' +
     ' <option value="Corsi di formazione">Consulenza Personale</option>' +
     ' <option value="Corsi di formazione">Consulenza Privata</option>' +
     ' <option value="Corsi di formazione">Consulenza Fiscale Internazionale</option>' +
     '</optgroup>' +
     '</select>';

     } else {
     if ( firstChoice == 2 ) {
       theContainer.innerHTML = 
     '<select id="select_6" size="1" name="servizio">' +
     '<optgroup label="" id="ch_2">' +
     ' <option value="Friend">Friend</option>' +
     ' <option value="Associato">Associato</option>' +
     ' <option value="Affiliato">Affiliato</option>' +
     ' <option value="Head Hunter">Head Hunter</option>' +
     '</optgroup>' +
     '</select>';

     } else {
         //qui il caso 3 o ulteriori if-else
       }
       }
       }
  }

</script>
</head>
<body>
<form name="main">
    <select id="argomento" size="1" name="argomento" onchange="populateNext();">
    <option value="">Scegli un argomento </option>
    <option value="Prodotti cliente">Prodotti al Cliente</option>
    <option value="Lavora con noi">Lavora Con Noi</option>
    <option value="Corsi di formazione">Corsi di Formazione</option>
   </select> 
  

  <div id="seldiv">
   <select id="select_6" size="1" name="servizio" disabled="disabled"><option>- - - - - - -</option>
   </select>
  </div>

</form>
</body></html>

In pratica, si tratta di "costruire" di volta in volta la SELECT all' interno di un Elemento contenitore (DIV o TABLE/TD può anche essere), con .innerHTML

**frenky7** · 13-06-2011, 17:05

ok..solo una cosa..siccome sono su joomla preferirei evitare di scrivere lo script nell'head..nn c'è un'alternativa? io ho ua parte dove posso inserire il js relativo a un determinato form; non si potrebbe fare una funzione che posso inserire lì e richiamare dall'html?

**frenky7** · 18-06-2011, 15:42

non mi funziona..

**frenky7** · 30-06-2011, 17:41

sono ancora bloccato qui

**Gluck74** · 01-07-2011, 10:10

ciao,
i valori delle "seconde" combo, sono prestabiliti o li carichi da un DB o quant'altro?

inoltre che framework stai usando? setStyle mi pare di prototype.

dunque, il selettore dovrebbe essere
$$('#ch_'+1)

altrimenti dovresti prendere l'ID del <select> ed andare a ciclare sui child, perché appunto gli <optiongroup> da IE non credo siano accessibili.

Ciao

**frenky7** · 01-07-2011, 11:05

ciao

I valori sono pochi quindi come vedi dal codice li crea dinamicamente senza bisogno del db.
Le altre cose credo di non saperle

è un codice che mi hanno suggerito non ne so granchè di js..se non le funzioni più semplici

**Vindav** · 01-07-2011, 12:11

Lo script di Enzaccio puoi inserirlo in qualunque posizione della pagina, e non mi pare ci siano errori, quindi utilizza quello.

**Gluck74** · 01-07-2011, 12:36

Secondo me il codice che hai usa prototype, una libreria che dovresti aggiungere.
Io non la conosco, quindi questo è il codice leggermente corretto, rifatto per JQuery.

codice:

    <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var num_argomento = 2;
            // hide all the recipes to start with
            for (var i = 1; i <= num_argomento; i++)
                $('#ch_' + i).css('display', 'none');
            $('#argomento').change(function () {
                var argomento = $('#argomento').attr('selectedIndex');
                var optgroup = 0;
                for (var i = 1; i <= num_argomento; i++) {
                    if (i == argomento) {
                        $('#ch_' + i).attr('disabled', false);
                        $('#ch_' + i).css('display', 'block');
                    } else {
                        $('#ch_' + i).attr('disabled', true);
                        $('#ch_' + i).css('display', 'none');
                    }
                }
            });
        });
    </script>

non scordarti la libreria js

**frenky7** · 01-07-2011, 13:06

mi dà problemi la parte dell'inner html..ho provato a toglierla e funziona.. (se vi interessa sono su joomla quindi è un pò forzata la gestione in quanto il js lo devo inserire per forza nella sezione dedicata al js non all'interno della stessa pagina del form)

Discussione: funzione select concatenate

Strumenti discussione

Ricerca discussione

Visualizza

funzione select concatenate

Permessi di invio