基于另一选择框选中项，启用/禁用含指定文本的select选项

你需要修改changeLocation函数，实现根据第一个选择框的选中项动态过滤第二个选择框的选项，以下是修改后的代码：

修改后的JavaScript代码 #

function changeLocation() {
  const selectedRoom = $('#extra_ans_1').find(":selected").text();
  const $locationSelect = $('#extra_ans_2');
  const $locationContainer = $('#selectLocation1');

  // 重置所有选项：显示所有选项并启用
  $locationSelect.find('option').show().prop('disabled', false);

  if (!selectedRoom || selectedRoom === '-- Not selected --') {
    // 选中默认项时隐藏第二个选择框容器
    $locationContainer.hide();
    return;
  }

  // 显示第二个选择框容器
  $locationContainer.show(500);

  // 根据选中的房间过滤选项
  if (selectedRoom.includes('Hosp')) {
    // 隐藏所有不包含"Box"的选项（除了默认空选项）
    $locationSelect.find('option:not(:contains("Box")):not([value=""])').hide().prop('disabled', true);
  } else if (selectedRoom.includes('Top')) {
    // 隐藏所有不包含"TFR"的选项（除了默认空选项）
    $locationSelect.find('option:not(:contains("TFR")):not([value=""])').hide().prop('disabled', true);
  } else if (selectedRoom.includes('McLaren')) {
    // 隐藏所有不包含"McLaren"的选项（除了默认空选项）
    $locationSelect.find('option:not(:contains("McLaren")):not([value=""])').hide().prop('disabled', true);
  }

  // 重置第二个选择框到默认选项
  $locationSelect.val('');
}

HTML代码（无需修改，保留服务器生成内容） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="margin-bottom:15px;">
  <select name="extra_ans_1" id="extra_ans_1" class="selMatch" onchange="changeLocation()" required>
    <option value="" selected>-- Not selected --</option>
    <option value="Hospital">Hospital</option>
    <option value="Top Floor">Top Floor</option>
    <option value="McLaren Suite">McLaren Room</option>
  </select>
</div>
<div style="margin-bottom:15px;display:none;" id="selectLocation1">
  <select name="extra_ans_2" id="extra_ans_2" class="selLocation">
    <option value="" selected>-- Not selected --</option>
    <option value="Box 1">Box 1</option>
    <option value="Box 2">Box 2</option>
    <option value="Box 3">Box 3</option>
    <option value="Box 4">Box 4</option>
    <option value="Box 5">Box 5</option>
    <option value="Box 6">Box 6</option>
    <option value="Box 7">Box 7</option>
    <option value="Box 8">Box 8</option>
    <option value="Box 9">Box 9</option>
    <option value="Box 10">Box 10</option>
    <option value="Box 11">Box 11</option>
    <option value="Box 12">Box 12</option>
    <option value="Box 13">Box 13</option>
    <option value="Box 14">Box 14</option>
    <option value="TFR 1">TFR 1</option>
    <option value="TFR 2">TFR 2</option>
    <option value="TFR 3">TFR 3</option>
    <option value="TFR 4">TFR 4</option>
    <option value="TFR 5">TFR 5</option>
    <option value="TFR 6">TFR 6</option>
    <option value="TFR 7">TFR 7</option>
    <option value="TFR 8">TFR 8</option>
    <option value="TFR 9">TFR 9</option>
    <option value="TFR 10">TFR 10</option>
    <option value="TFR 11">TFR 11</option>
    <option value="TFR 12">TFR 12</option>
    <option value="TFR 14">TFR Room 14</option>
    <option value="TFR 15">TFR Room 15</option>
    <option value="TFR 16">TFR Room 16</option>
    <option value="TFR 17">TFR Room 17</option>
    <option value="TFR 18">TFR Room 18</option>
    <option value="TFR 19">TFR Room 19</option>
    <option value="TFR 20">TFR Room 20</option>
    <option value="TFR 21">TFR Room 21</option>
    <option value="McLaren 21">McLaren 21</option>
    <option value="McLaren 22">McLaren 22</option>
    <option value="McLaren 23">McLaren 23</option>
    <option value="McLaren 24">McLaren 24</option>
    <option value="McLaren 25">McLaren 25</option>
  </select>
</div>

关键说明 #

• 重置状态：每次触发change事件时，先重置第二个选择框的所有选项为显示且可用状态，避免之前的过滤结果残留
• 过滤逻辑：使用jQuery的:contains()选择器匹配选项文本，同时排除默认空选项，确保用户可重新选择
• 禁用+隐藏：同时设置disabled和hide，既避免用户选中无效选项，也让下拉框只显示符合条件的内容
• 默认项处理：选中第一个选择框的默认项时，隐藏第二个选择框容器，保持界面简洁

内容的提问来源于stack exchange，提问作者Gary