Question

嗨，我非常喜欢js和bootstrap和css ...所以我正在寻找了解如何启用一些下拉菜单并禁用其他之后我从另一个下拉菜单中选择一个选项之前。有我的四个下拉菜单（我正在使用bootstrap-select https://silviomoreto.github.io/bootstrap-select/）：

foreach

在第一个菜单中，我选择了三个选项中的一个，按下按钮后我想在下一个div中只启用三个下一个菜单中的一个，但我该怎么做？

由于

Answer 1

<强> Example fiddle

您必须向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>

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

1 个答案: