Visualizzazione dei risultati da 1 a 2 su 2
  1. #1

    Filtrare option select in base ad un valore minimo ed uno massimo

    Ciao a tutti

    Vorrei poter filtrare una option select in base ad un valore minimo ed uno massimo ma non ho idea su come fare
    Di seguito una select con i valori che vanno da 10 a 30:
    codice:
    <select id="dp_larghezza" data-id="391" data-type="8" class="form-control dp_entry dp_dropdown" data-name="larghezza" data-label="Larghezza Esterna  L">
    <option data-id="2733" data-label="10" data-color="" data-thumb="" data-image="" data-has-image="" value="10">10</option>
    <option data-id="2734" data-label="11" data-color="" data-thumb="" data-image="" data-has-image="" value="11">11</option>
    <option data-id="2735" data-label="12" data-color="" data-thumb="" data-image="" data-has-image="" value="12">12</option>
    <option data-id="2736" data-label="13" data-color="" data-thumb="" data-image="" data-has-image="" value="13">13</option>
    <option data-id="2737" data-label="14" data-color="" data-thumb="" data-image="" data-has-image="" value="14">14</option>
    <option data-id="2738" data-label="15" data-color="" data-thumb="" data-image="" data-has-image="" value="15">15</option>
    <option data-id="2739" data-label="16" data-color="" data-thumb="" data-image="" data-has-image="" value="16">16</option>
    <option data-id="2740" data-label="17" data-color="" data-thumb="" data-image="" data-has-image="" value="17">17</option>
    <option data-id="2744" data-label="18" data-color="" data-thumb="" data-image="" data-has-image="" value="18">18</option>
    <option data-id="2743" data-label="19" data-color="" data-thumb="" data-image="" data-has-image="" value="19">19</option>
    <option data-id="2742" data-label="20" data-color="" data-thumb="" data-image="" data-has-image="" value="20">20</option>
    <option data-id="2741" data-label="21" data-color="" data-thumb="" data-image="" data-has-image="" value="21">21</option>
    <option data-id="2745" data-label="22" data-color="" data-thumb="" data-image="" data-has-image="" value="22">22</option>
    <option data-id="2746" data-label="23" data-color="" data-thumb="" data-image="" data-has-image="" value="23">23</option>
    <option data-id="2747" data-label="24" data-color="" data-thumb="" data-image="" data-has-image="" value="24">24</option>
    <option data-id="2748" data-label="25" data-color="" data-thumb="" data-image="" data-has-image="" value="25">25</option>
    <option data-id="2749" data-label="26" data-color="" data-thumb="" data-image="" data-has-image="" value="26">26</option>
    <option data-id="2750" data-label="27" data-color="" data-thumb="" data-image="" data-has-image="" value="27">27</option>
    <option data-id="2751" data-label="28" data-color="" data-thumb="" data-image="" data-has-image="" value="28">28</option>
    <option data-id="2752" data-label="29" data-color="" data-thumb="" data-image="" data-has-image="" value="29">29</option>
    <option data-id="2753" data-label="30" data-color="" data-thumb="" data-image="" data-has-image="" value="30">30</option>
    </select>
    Vorrei che dato un valore minimo ed uno massimo, ad esempio valueMin=15 e valueMax=25 la select si aggiornasse così:
    codice:
    <select id="dp_larghezza" data-id="391" data-type="8"  class="form-control dp_entry dp_dropdown" data-name="larghezza"  data-label="Larghezza Esterna  L">
    <option  data-id="2738" data-label="15" data-color="" data-thumb="" data-image=""  data-has-image="" value="15">15</option>
    <option  data-id="2739" data-label="16" data-color="" data-thumb="" data-image=""  data-has-image="" value="16">16</option>
    <option  data-id="2740" data-label="17" data-color="" data-thumb="" data-image=""  data-has-image="" value="17">17</option>
    <option  data-id="2744" data-label="18" data-color="" data-thumb="" data-image=""  data-has-image="" value="18">18</option>
    <option  data-id="2743" data-label="19" data-color="" data-thumb="" data-image=""  data-has-image="" value="19">19</option>
    <option  data-id="2742" data-label="20" data-color="" data-thumb="" data-image=""  data-has-image="" value="20">20</option>
    <option  data-id="2741" data-label="21" data-color="" data-thumb="" data-image=""  data-has-image="" value="21">21</option>
    <option  data-id="2745" data-label="22" data-color="" data-thumb="" data-image=""  data-has-image="" value="22">22</option>
    <option  data-id="2746" data-label="23" data-color="" data-thumb="" data-image=""  data-has-image="" value="23">23</option>
    <option  data-id="2747" data-label="24" data-color="" data-thumb="" data-image=""  data-has-image="" value="24">24</option>
    <option  data-id="2748" data-label="25" data-color="" data-thumb="" data-image=""  data-has-image="" value="25">25</option>
    </select>
    Senza perdere data-id, data-label ecc

    Grazie in anticipo

  2. #2
    Ho provato il seguente codice, funziona solo la prima volta dopo di che non funziona più
    Ho creato 3 select con i valori da 10 a 80. Quando il valore di una select supera il valore 45 allora per le altre 2 si disabilitano i valori dal 46 all'80
    codice:
     $(document).ready(function(){    
     
        /* Larghezza */
    
        $('#dp_larghezza').change(function() {
    
            var larg = parseInt($('#dp_larghezza').find(":selected").text());
            var prof = parseInt($('#dp_profondita').find(":selected").text());
            var altez = parseInt($('#dp_altezza').find(":selected").text());
    
        if (larg <= 45 && prof <= 45 && altez <= 45){
            
            var pmin = 10;
            var pmax = 80;
            var amin = 10;
            var amax = 80;
            var lmin = 10;
            var lmax = 80;
            
        } else if (larg >= 45 && prof <= 45 && altez <= 45){
            
            var pmin = 10;
            var pmax = 45;
            var amin = 10;
            var amax = 45;
            var lmin = 10;
            var lmax = 80;
            
        } else if (larg <= 45 && prof >= 45 && altez <= 45){
            
            var pmin = 10;
            var pmax = 80;
            var amin = 10;
            var amax = 45;
            var lmin = 10;
            var lmax = 45;
            
        } else if (larg <= 45 && prof <= 45 && altez >= 45){
            
            var pmin = 10;
            var pmax = 45;
            var amin = 10;
            var amax = 80;
            var lmin = 10;
            var lmax = 45;
    
        }
    
            $('#dp_profondita option').filter(function() {
            var val = $(this).val();
            return val < pmin || val > pmax;
            }).prop('disabled', true);
            
            $('#dp_altezza option').filter(function() {
            var val = $(this).val();
            return val < amin || val > amax;
            }).prop('disabled', true);
            
            $('#dp_larghezza option').filter(function() {
            var val = $(this).val();
            return val < lmin || val > lmax;
            }).prop('disabled', true);
        
        });
    
    });

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