Disable / enable select box options containing certain text based on another selection - Jquery

Gary
March 22, 2023
254 views
0 votes
2 Answers

I have 2 select boxes. The first is to select a room, the second is to select a location within those rooms. I would like to hide or disable certain options in the second select box when an option is selected from the first box. For example, if "Hospital" is selected from the first drop down, I only want to show values that contain "Box" to appear in the second drop down. If "Top Floor" is selected, I only want to show options that contain "TFR".

I have no control over the drop down contents, as they are server generated. I have a fiddle

Here’s the code, and the Jquery I have so far:

function changeLocation() {
  var checkBox = $('#extra_ans_1').find(":selected").text();

  if (checkBox.includes('Hosp')) {
    $("#selectLocation1").show(500);
  }

  if (checkBox.includes('Top')) {
    $("#selectLocation1").show(500);
  }

  if (checkBox.includes('McLaren')) {
    $("#selectLocation1").show(500);
  }

};

<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>

Answers

That was not trivial

const $sel2 = $("#extra_ans_2");
const starts = {
  "Hospital": "Box",
  "Top Floor": "TFR",
  "McLaren Suite": "McLaren"
}
$('#extra_ans_1').on("change", function() {
  const text = this.value;
  const show = starts[text];
  const $opts = $sel2.find("option").each(function() {
    $(this).toggle(!show || (show && this.value.startsWith(show)))
  });
  $sel2.val(""); // reset
  $("#selectLocation1").show(500);

});

<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" 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>

This is a way to do it using filter and regex to hide options

function changeLocation() {
  $('#selectLocation1 option').show();
  var checkBox = $('#extra_ans_1').find(":selected").text();

  if (checkBox.includes('Hosp')) {
     showOption(/Box.*/);
  }

  if (checkBox.includes('Top')) {
    showOption(/TFR.*/);
  }
  
  if (checkBox.includes('McLaren')) {
    showOption(/McLaren.*/);
  }
  
  $("#selectLocation1").show(500);

};

function showOption(regex) {
  $('#selectLocation1 option').filter(function() {
      return !(regex.test(this.value));
  }).hide();
}

<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>

Please signup or login to give your own answer.

Click here to cancel reply.

Disable / enable select box options containing certain text based on another selection – Jquery

Answers