如何有条件地显示下拉列表？答案

【问题标题】：How can I display a dropdown conditionally?如何有条件地显示下拉列表？
【发布时间】：2020-12-06 05:36:33
【问题描述】：

当访问者单击按钮时，我需要更改下拉内容。

例如，用“价格1”按钮上的蛋糕，显示以下内容。

<option selected>Max </option>
<option>1</option>
<option>2</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
</select>

并通过点击“价格2”按钮，以下内容：

<option selected>Max </option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
</select>

谢谢。

【问题讨论】：

标签： html jquery bootstrap-4

【解决方案1】：

使用 toggleClass 在显示选择的活动类之间切换。

$(document).ready(function() {
    $("#price1").click(function() {
      $("#select2").removeClass("active");
      $("#select1").toggleClass("active");
    });
    
    $("#price2").click(function() {
      $("#select1").removeClass("active");
      $("#select2").toggleClass("active");
    });
});

select {
  display: none;
}

.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="price1">Price 1</button>
<button id="price2">Price 2</button>

<select id="select1" class="active">
  <option selected>Max </option>
  <option>1</option>
  <option>2</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
</select>

<select id="select2">
  <option selected>Max </option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
  <option>13</option>
  <option>14</option>
</select>

【讨论】：