动态禁用下拉菜单：在选择选项后禁用下拉菜单

Question

动态禁用下拉菜单：在选择选项后禁用下拉菜单

3

你好，我对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 中的三个菜单中的一个，但我该如何做到这一点？谢谢。

- tafazzi87

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，

- Zakaria Acharki · Accepted Answer

示例代码

您需要为“确定”按钮添加一个点击事件，然后在此事件中从第一个选择器中获取所选类别，并根据所选类别显示/隐藏所需的选择器。

希望这可以帮到您。

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