オプションを選択した後にドロップダウンメニューを動的に無効にする

Question

こんにちは、jsとブートストラップとCSSを使用しているので、いくつかのドロップダウンメニューを有効にして、別のドロップダウンメニューから私は3つの選択肢のいずれかを選択し、押しボタンの後に私が唯一の3つの次のメニューを有効にする最初のメニューで

<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> 

：（私は、ブートストラップ・セレクトhttps://silviomoreto.github.io/bootstrap-select/使用しています）私の4つのドロップダウンメニューがあります次のdivしかし、私はこれを行うことができますか？あなたがokボタンにクリックイベントを追加する必要が

おかげ

Answer 1

Example fiddle

は、このイベントに依存したい選択を非表示/第1の選択から選択したカテゴリやショーを得ます選択されたカテゴリ。

これが役に立ちます。フィドルの作品で、私のPC上で、これはありません...私はおかしくなりそうだなぜ

$('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>