选择一个选项后，动态禁用下拉菜单

Question

Hi i'm very noob with js and bootstrap and css...so i'm searching to understand how can I enable some dropdown menus and disable other after that I choose before an option from another dropdown menu. there are my four dropdown menu (i'm using bootstrap-select https://silviomoreto.github.io/bootstrap-select/ ):

<div>
    <h3>Categoria d'opera</h3>
    <select class="selectpicker" title="Clicca per selezionare" id="categorie">
        <optgroup label="Categorie d'opera">
            <option value="1">Edilizia</option>
            <option value="2">Strutture</option>
            <option value="3">Impianti</option>
        </optgroup>
    </select>
    <button id="okcategoria" type="button" onclick="document.getElementById('destinazione').style.display='block'"> Ok!
    </div>
    <div id="destinazione" style="display:none">
    <h3>Destinazione funzionale delle opere</h3>
    <select class="selectpicker" title="Clicca per selezionare" id="destEdilizia">
        <optgroup label="Destinazione funzionale delle opere">
            <option>Insediamenti produttivi per l'agricoltura, l'industria, l'artigianato - depositi</option>
            <option>Industria alberghiera, turismo e commercio e servizi per la mobilità</option>
            <option>Residenza</option>
            <option>Sanità, istruzione, ricerca</option>
            <option>Cultura, vita sociale, sport, culto</option>
            <option>Sedi amministrative, giudiziarie, delle forze dell'ordine</option>
            <option>Arredi, forniture, aree esterne pertinenziali allestite</option>
            <option>Interventi su edifici e manufatti di rilevante interesse storico-artistico e monumentale</option>
        </optgroup>
    </select>
    <select class="selectpicker" title="Clicca per selezionare" id="destStrutture">
        <optgroup label="Destinazione funzionale delle opere">
            <option>Strutture, opere infrastrutturali puntuali, verifiche non soggette ad azioni sismiche</option>
            <option>Strutture, opere infrastrutturali puntuali, verifiche soggette ad azioni sismiche</option>
            <option>Strutture speciali</option>
        </optgroup>
    </select>
    <select class="selectpicker" title="Clicca per selezionare" id="destImpianti">
        <optgroup label="Destinazione funzionale delle opere">
            <option>Impianti meccanici a fluido a servizio delle costruzioni</option>
            <option>Impianti elettrici e speciali a servizio delle costruzioni - singole apparecchiature per laboratori e impianti pilota</option>
            <option>Impianti industriali - impianti pilota e impianti di depurazione con ridotte problematiche tecniche - discariche inerti</option>
            <option>Impianti industriali - impianti pilota e impianti di depurazione complessi - discariche con trattamenti e termovalorizzatori</option>
            <option>Opere elettriche per reti di trasmissione e distribuzione energia e segnali - laboratori con ridotte problematiche tecniche</option>
            <option>Impianti per la produzione di energia - laboratori complessi</option>
        </optgroup>
    </select>
</div>

In the first menu I select one of three choices and after press button I want to enable only one of three next menus in the next div but how can I do this?

Thanks

Answer 1

Example fiddle

You have to add a click event to the ok button then in this event get the category selected from the first select and show/hide the selects you want depending on the selected category.

Hope this helps.

 $('select').selectpicker(); $('#okcategoria').on('click', function(){ var selected_category = $('#categorie option:selected').val(); alert(selected_category); $('#destinazione').show(); $('#destinazione .selectpicker').hide(); //Hide the three selects //Show the one you want depending on category if(selected_category==1){ $('#destEdilizia').show(); }else if(selected_category==2){ $('#destStrutture').show(); }else{ $('#destImpianti').show(); } }) 

 .bootstrap-select.btn-group:not(.input-group-btn), .bootstrap-select.btn-group[class*="span"] { margin: 0 !important; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css" rel="stylesheet"/> <div> <h3>Categoria d'opera</h3> <select class="selectpicker" title="Clicca per selezionare" id="categorie"> <optgroup label="Categorie d'opera"> <option value="1">Edilizia</option> <option value="2">Strutture</option> <option value="3">Impianti</option> </optgroup> </select> <button id="okcategoria" type="button"> Ok! </div> <div id="destinazione" style="display:none"> <h3>Destinazione funzionale delle opere</h3> <select class="selectpicker" title="Clicca per selezionare" id="destEdilizia"> <optgroup label="Destinazione funzionale delle opere"> <option>111</option> <option>Industria alberghiera, turismo e commercio e servizi per la mobilità</option> <option>Residenza</option> <option>Sanità, istruzione, ricerca</option> <option>Cultura, vita sociale, sport, culto</option> <option>Sedi amministrative, giudiziarie, delle forze dell'ordine</option> <option>Arredi, forniture, aree esterne pertinenziali allestite</option> <option>Interventi su edifici e manufatti di rilevante interesse storico-artistico e monumentale</option> </optgroup> </select> <select class="selectpicker" title="Clicca per selezionare" id="destStrutture"> <optgroup label="Destinazione funzionale delle opere"> <option>222</option> <option>Strutture, opere infrastrutturali puntuali, verifiche soggette ad azioni sismiche</option> <option>Strutture speciali</option> </optgroup> </select> <select class="selectpicker" title="Clicca per selezionare" id="destImpianti"> <optgroup label="Destinazione funzionale delle opere"> <option>333</option> <option>Impianti elettrici e speciali a servizio delle costruzioni - singole apparecchiature per laboratori e impianti pilota</option> <option>Impianti industriali - impianti pilota e impianti di depurazione con ridotte problematiche tecniche - discariche inerti</option> <option>Impianti industriali - impianti pilota e impianti di depurazione complessi - discariche con trattamenti e termovalorizzatori</option> <option>Opere elettriche per reti di trasmissione e distribuzione energia e segnali - laboratori con ridotte problematiche tecniche</option> <option>Impianti per la produzione di energia - laboratori complessi</option> </optgroup> </select> </div>