Filtro condizionale select

[fabioweb90]

Buongiorno,
per questo e-commerce che sto realizzando avrei necessità di realizzare una select che faccia filtro tra: materiale tessuto e colore telo..

acrilico -> mostra solo colore ecrù
PVC -> mostra solo beige e bianco
Tempotest -> mostra tutti i colori tranne ecrù

Ho provato a buttare uno schema logico.. Se va bene come posso implementarlo?

jQuery(document).ready(function( $ ) {
     $("#pa_materiale-tessuto").change(function() {
        var materiale = $("#pa_materiale-tessuto").val(); //memorizzo value materiale
        switch (materiale) {  //switch sui materiali
            case (materiale == 'acrilico'):
            //mostra solo colore ecrù
            break;
            case (materiale == 'pvc'):
            //mostra beige + bianco
            break;
            case (materiale == 'tempotest'):
            //tutti i colori tranne ecrù 
            break;
            
        }
     });
 });

Grazie per il vostro aiuto

[tampertools]

Io più che con uno switch, farei così:

/* Un piccolo oggetto con le "impostazioni":
    Se un giorno dovessi aggiungere colori o materiali puoi modificare solo questo
    (Io solitamente lo salvo in un file diverso così da averlo sotto mano per ogni modifica non strettamente legata al codice ma ai contenuti)
    So che forse non è il massimo fare così, ma un'applicazione più facilmente mantenibile è sempre meglio :D
*/
coloriSelect = {
    colori : { // "nomeColore": "codiceColore"
        ecru : "#abcdef", // Mai sentito nominare :D
        beige : "#eddd97",
        bianco : "#ffffff",
        rosso : "#ff0000" // Puoi aggiungere tutti i colori che vuoi
    },
    materiali : {
        acrilico : [
            "ecru"
        ],
        pvc : [
            "beige",
            "bianco"
        ],
        tempotest : [
            "beige",
            "bianco",
            "rosso"
        ]
    }
}
jQuery(document).ready(function( $ ) {
     $("#pa_materiale-tessuto").on("change", function () {
        var select = $("#select_colori"); // La select dei colori
        var materiale = $(this).val(); // Se ti riferisci allo stesso elemento è meglio usare this: 1) è più performante (jQuery non deve cercarlo di nuovo) 2) Se un giorno cambiasse l'id della select dovresti cambiare solo quello che lancia la funzione senza preoccuparti di tutti gli altri
        var colori = coloriSelect.materiali[materiale]; // Prendo l'elenco dei colori
        select.empty(); // Svuoto la select
        $.each(colori, function () { // Ciclo l'array dei colori da usare
            var option = $("<option/>"); // Creo la option
            option.val(coloriSelect.colori[this]); // Imposto il codice colore come value della option
            option.text(this); // Scrivo il nome del colore nell'option
            option.appendTo(select); // Aggiungo l'option alla select
        }); 
     });
 });

http://jsfiddle.net/Nicolo99/ptQV4/e...esult,html,js/

[fabioweb90]

Wao davvero interessante! ho integrato il tuo codice però non funziona in wordpress.. devo sostituire qualche paramentro?
Perchè cmq vedo che

$("#pa_materiale-tessuto").on("change", function () {

è quello giusto..

[tampertools]

La select viene generata dinamicamente?

[fabioweb90]

Esattamente! Viene generata dinamicamente. Inoltre necessita di almeno un colore come campo attributo per essere visualizzata.

[tampertools]

Non so se con l'evento change funziona, ma prova a sostituire

$("#pa_materiale-tessuto").on("change",#function#()#{

Con

$("un-genitore-della-select-va-bene-anche-body-ma-più-è-preciso-meglio-è").on("change", "#pa_materiale-tessuto", function () {

[fabioweb90]

Ho fatto una serie di test e in realtà era un mio errore.. il tuo script è ottimo però concatenandolo alla query dinamica mi da un pò di problematiche quindi ho pensato qualcosa di diverso e ti chiederei un aiuto su questo. Link

Lo script funziona correttamente. Il punto è che devo ricaricare la pagina per vedere i risultati.
Mi spiego meglio:
seleziono acrilico faccio F5 e vedo un colore
selezione pvc, F5 e vedo due colore
seleziono tempotest, F5 vedo tutti gli altri colori.

Come faccio a rendere questa modifica istantanea senza dover fare F5?

<script type="text/javascript">
jQuery(document).ready(function( $ ) {

var materiale = $('#pa_materiale-tessuto option:selected').val();

switch (materiale) {
  case 'acrilico':
  $("#pa_colore-telo").children("option[value='fffcdf']").css("display", "none");
  $("#pa_colore-telo").children("option[value='ffffff']").css("display", "none");
  $("#pa_colore-telo").children("option[value='802943']").css("display", "none");
  $("#pa_colore-telo").children("option[value='3f0014']").css("display", "none");
  $("#pa_colore-telo").children("option[value='ffe600']").css("display", "none");
  $("#pa_colore-telo").children("option[value='d1d3d4']").css("display", "none");
  $("#pa_colore-telo").children("option[value='black']").css("display", "none");
  $("#pa_colore-telo").children("option[value='red']").css("display", "none");
  $("#pa_colore-telo").children("option[value='b8695c']").css("display", "none");
  $("#pa_colore-telo").children("option[value='a2d06d']").css("display", "none");
  break;
  
  case 'pvc':
  $("#pa_colore-telo").children("option[value='802943']").css("display", "none");
  $("#pa_colore-telo").children("option[value='3f0014']").css("display", "none");
  $("#pa_colore-telo").children("option[value='ecru']").css("display", "none");
  $("#pa_colore-telo").children("option[value='ffe600']").css("display", "none");
  $("#pa_colore-telo").children("option[value='d1d3d4']").css("display", "none");
  $("#pa_colore-telo").children("option[value='black']").css("display", "none");
  $("#pa_colore-telo").children("option[value='red']").css("display", "none");
  $("#pa_colore-telo").children("option[value='b8695c']").css("display", "none");
  $("#pa_colore-telo").children("option[value='a2d06d']").css("display", "none");
  break;

  case 'tempotest':
  $("#pa_colore-telo").children("option[value='ecru']").css("display", "none");
  break;
  
}
});
</script>

[tampertools]

Devi legarlo all'evento change

[fabioweb90]

Giusto è vero!
Ho provato ad abbinarlo così ma sembra non gradire..

jQuery(document).ready(function( $ ) {

var materiale = $('#pa_materiale-tessuto option:selected').val();

switch (materiale) {
  
  case 'acrilico':
  $("#pa_materiale-tessuto").change(function() { // cambio su materiale tessuto
  $("#pa_colore-telo").children("option[value='fffcdf']").css("display", "none");
  $("#pa_colore-telo").children("option[value='ffffff']").css("display", "none");
  $("#pa_colore-telo").children("option[value='802943']").css("display", "none");
  $("#pa_colore-telo").children("option[value='3f0014']").css("display", "none");
  $("#pa_colore-telo").children("option[value='ffe600']").css("display", "none");
  $("#pa_colore-telo").children("option[value='d1d3d4']").css("display", "none");
  $("#pa_colore-telo").children("option[value='black']").css("display", "none");
  $("#pa_colore-telo").children("option[value='red']").css("display", "none");
  $("#pa_colore-telo").children("option[value='b8695c']").css("display", "none");
  $("#pa_colore-telo").children("option[value='a2d06d']").css("display", "none");
  });
  break;
  
  case 'pvc':
  $("#pa_materiale-tessuto").change(function() {
  $("#pa_colore-telo").children("option[value='802943']").css("display", "none");
  $("#pa_colore-telo").children("option[value='3f0014']").css("display", "none");
  $("#pa_colore-telo").children("option[value='ecru']").css("display", "none");
  $("#pa_colore-telo").children("option[value='ffe600']").css("display", "none");
  $("#pa_colore-telo").children("option[value='d1d3d4']").css("display", "none");
  $("#pa_colore-telo").children("option[value='black']").css("display", "none");
  $("#pa_colore-telo").children("option[value='red']").css("display", "none");
  $("#pa_colore-telo").children("option[value='b8695c']").css("display", "none");
  $("#pa_colore-telo").children("option[value='a2d06d']").css("display", "none");
  });
  break;

  case 'tempotest':
  $("#pa_materiale-tessuto").change(function() {
  $("#pa_colore-telo").children("option[value='ecru']").css("display", "none");
  });
  break;
  
}
});