選擇一個選項后，動態禁用下拉菜單

Question

嗨，我非常喜歡js和bootstrap和css ...所以我正在尋找了解如何啟用一些下拉菜單並禁用其他之后，我選擇從另一個下拉菜單中的選項。 有我的四個下拉菜單（我正在使用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>

在第一個菜單中，我選擇三個選項中的一個，按下按鈕后我想在下一個div中只啟用三個下一個菜單中的一個，但我該怎么做？

謝謝

Answer 1

示例小提琴

您必須向ok按鈕添加單擊事件，然后在此事件中獲取從第一個選擇中選擇的類別，並根據所選類別顯示/隱藏所需的選項。

希望這可以幫助。

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