Disable dropdown menu dynamically after choose an option

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>