Need Help - Hide/Show Options From Select when Selected

Question

I'm having trouble hiding options when some other option is selected in select option: I have my form on default: Select1 on AS400 and Select2 on New Account which shows the inputs the user will fill out.

The problem I'm facing now is a couple of errors:

When the form is loaded Select1 on AS400 and Select2 on New Account which shows the inputs the user will fill out and at the same time select2 option is also showing which shouldn't be showing

if the user selects other options from select2, the select3 option is showing also under select2 options

When the user selects select1 and chooses any other option from select3 the option from select1 is showing. is there any way I can fix that so that the user see what he selected or what user selects only shows that

// AS400 New Account/
$("#select1").change(function() {
  if ($(this).val() == "as400") {
    $('#otherFieldDiv').show();
  } else {
    $('#otherFieldDiv').hide();
  }
});
$("#select1").trigger("change");


$("#select2").change(function() {
  if ($(this).val() == "newacc") {
    $('#otherFieldGroupDiv').show();

  } else {
    $('#otherFieldGroupDiv').hide();

  }
});
$("#select2").trigger("change");


///AS400 Modify Account//
$("#select2").change(function() {
  if ($(this).val() == "mod") {
    $('#otherFieldGroupMod').show();

  } else {
    $('#otherFieldGroupMod').hide();
  }
});
$("#select2").trigger("change");

//AS400 Reset Password Account//

$("#select2").change(function() {
  if ($(this).val() == "reset") {
    $('#otherFieldGroupRes').show();
  } else {
    $('#otherFieldGroupRes').hide();
  }
});
$("#select2").trigger("change");

///Windows///
//// Windows New Account/////
$("#select1").change(function() {
  if ($(this).val() == "windows") {
    $('#otherFieldWin').show();

  } else {
    $('#otherFieldWin').hide();

  }
});
$("#select1").trigger("change");

$("#select3").change(function() {
  if ($(this).val() == "windowsacc") {
    $('#windowsAccount').show();

  } else {
    $('#windowsAccount').hide();
  }
});
$("#select3").trigger("change");

///K Drive and Group Access//
$("#select3").change(function() {
  if ($(this).val() == "kdrive") {
    $('#windowsAccountAccess').show();

  } else {
    $('#windowsAccountAccess').hide();
  }
});
$("#select3").trigger("change");

html,
body {
  min-height: 100%;
}

body,
div,
form,
input,
label {
  padding: 0;
  margin: 0;
  outline: none;
  font-family: Roboto, Arial, sans-serif;
  font-size: 13px;
  color: #666;
  line-height: 22px;
}

legend {
  color: #fff;
  background-color: #095484;
  padding: 3px 5px;
  font-size: 20px;
}

h1 {
  position: absolute;
  margin: 0;
  font-size: 36px;
  color: #fff;
  z-index: 2;
}

.testbox {
  display: flex;
  justify-content: center;
  align-items: center;
  height: inherit;
  padding: 20px;
}

form {
  width: 75%;
  padding: 20px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 20px 0 #095484;
}

.banner {
  position: relative;
  height: 320px;
  background-image: url("/Krishneel/Walgreens Logo's/Walgreens New Logo/banner.png");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.banner::after {
  content: "";
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
}

input {
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

input {
  width: calc(100% - 10px);
  padding: 5px;
}

select {
  width: 206%;
  padding: 1px 0;
  background: transparent;
}

input[type="date"] {
  padding: 4px 5px;
}

.item:hover p,
.item:hover i,
.question:hover p,
.question label:hover,
input:hover::placeholder {
  color: #095484;
}

.item input:hover {
  border: 1px solid transparent;
  box-shadow: 0 0 6px 0 #095484;
  color: #095484;
}

.item {
  margin: 10px 0;
}

input[type="date"]::-webkit-inner-spin-button {
  display: none;
}

.item i,
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  font-size: 20px;
  color: #095484;
}

.item i {
  right: 2%;
  top: 30px;
  z-index: 1;
}

[type="date"]::-webkit-calendar-picker-indicator {
  right: 1%;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
}

.question span {
  margin-left: 30px;
}

.btn-block {
  margin-top: 10px;
  text-align: center;
}

button {
  width: 150px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background: #095484;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
}

button:hover {
  background: #4286f4;
}

@media (min-width: 568px) {
  .name-item,
  .city-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .name-item input,
  .city-item input,
  .name-item div {
    width: calc(50% - 20px);
  }
  .name-item div input {
    width: 97%;
  }
  .name-item div label {
    display: block;
    padding-bottom: 5px;
  }
}

.status label:hover input {
  box-shadow: 0 0 5px 0 #095484;
}

.status-item input,
.status-item span {
  width: auto;
  vertical-align: middle;
}

.status-item input {
  margin: 0;
}

.status-item span {
  margin: 0 20px 0 5px;
}

textarea {
  width: calc(100% - 12px);
  padding: 5px;
  font-family: Roboto, Arial, sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="testbox">
  <form name="frmContact" id="" frmContact "" method="post" action="" enctype="multipart/form-data" class="p-3">
    <div class="banner">
      <h1>ID Request Form</h1>
    </div>
    <br>
    <p>Please fill out with the information that is requested below and submit the id request form. Thank you!</p>

    <div class="form-group">
      <p>Request Type</p>
      <label for="select1">Choose a Category</label>
      <select class="form-control" id="select1">
        <option value="as400">AS400</option>
        <option value="windows">Windows</option>

      </select>
    </div>
    <!---------------------------------------------------------------------------------------------------------->
    <!--AS400 Sub Category-->
    <div class="form-group" id="otherFieldDiv">
      <label for="select2">Choose a Sub-Category</label>
      <select class="form-control" id="select2">
        <option value="newacc">New Acount</option>

      </select>
    </div>
    <!------------------------------------------------------------------------------------------------------------->
    <!--Windows Sub Category-->
    <div class="form-group" id="otherFieldWin">
      <label for="select3">Choose a Sub-Category</label>
      <select class="form-control" id="select3">
        <option value="windowsacc">New Acount</option>
        <option value="kdrive">K Drive and Group Access</option>

      </select>
    </div>

    <!----------------------------------------------------- AS400 Account------------------------------------------->
    <!--AS400 New Account-->
    <div class="form-group" id="otherFieldGroupDiv">
      <p>AS400 New Account</p>
      <div class="row">
        <div class="col-6">
          <label for="otherField1">Requester (Full Name)</label>
          <input type="text" class="form-control w-100" id="otherField1" placeholder="Type Here...">
        </div>
        <br><br>
        <div class="col-6">
          <label for="otherField2">Beneficiary (Full Name)</label>
          <input type="text" class="form-control w-100" id="otherField2" placeholder="Type Here...">
        </div>
        <br><br>
        <div class="col-6">
          <label for="otherField3">Employee ID</label>
          <input type="text" class="form-control w-100" id="otherField3" placeholder="Type Here...">
        </div>
        <br>
        <div class="col-6">
          <label for="otherField4">New Job Category
                        <input list="otherField4" type="text" class="form-control w-100" name="myBrowser" placeholder="*Click in box for Job Category List*"></label>
          <datalist id="otherField4">
                                    <option value="NO CHANGE">NO CHANGE</option>
                                    <option value="ADMCLK = Admin Clerk">ADMCLK = Admin Clerk</option>
                                    <option value="ADMCLK+ = Admin Clerk w/ Manual Book">ADMCLK+ = Admin Clerk w/ Manual Book</option>
                                    <option value="ADMMGR = Admin MGR w/ Manual Book">ADMMGR = Admin MGR w/ Manual Book</option>
                                    <option value="DCM = DC Manager">DCM = DC Manager</option>
                                    <option value="FM IN = Inbound Funtion Manager">FM IN = Inbound Funtion Manager</option>
                                    <option value="FM OUT = Outbound Funtion Manager">FM OUT = Outbound Funtion Manager</option>
                                    <option value="FM LC = Location Control Function Manager">FM LC = Location Control Function Manager</option>
                                    <option value="JOB-CAT-01 = Admn Manager (No Manual Book)">JOB-CAT-01 = Admn Manager (No Manual Book)</option>
                                    <option value="LC + VERIFY = LC w/ Verify Light">LC + VERIFY = LC w/ Verify Light</option>
                                    <option value="LOC CLRK = Location Control Clerk">LOC CLRK = Location Control Clerk</option>
                                    <option value="LP = Asset Protection">LP = Asset Protection</option>

                                </datalist>
        </div>
        <br>
        <div class="col-6">
          <label for="otherField5">New AS400 ID</label>
          <input type="text" class="form-control w-100" id="otherField5" placeholder="Type Here...">
        </div>
      </div>
    </div>

    <!----------------------------------------------------Windows Account------------------------------------------------------------------>

    <!--Windows New Account-->
    <div class="form-group" id="windowsAccount">
      <p>Windows New Account</p>
      <div class="row">
        <div class="col-6">
          <label for="otherField1">Full Name</label>
          <input type="text" class="form-control w-100" id="otherField1" placeholder="Type Here...">
        </div>
        <br><br>
        <div class="col-6">
          <label for="otherField3">Employee ID</label>
          <input type="text" class="form-control w-100" id="otherField3" placeholder="Type Here...">
        </div>
        <br><br>
        <div class="col-6">
          <label for="otherField7">ONE ID (Formally Authenticator ID)</label>
          <input type="text" class="form-control w-100" id="otherField7" placeholder="Type Here...">
        </div>
        <br><br>
        <div class="col-6">
          <label for="otherField8"> Mirror Account ONE ID</label>
          <input type="text" class="form-control w-100" id="otherField8" placeholder="Type Here...">
        </div>
        <br><br>
        <div class="col-6">
          <label for="otherField9">Comments</label>
          <input type="text" class="form-control w-100" id="otherField9" placeholder="Type Here...">
        </div>
      </div>
    </div>

    <!--K Drive and Group Access-->
    <div class="form-group" id="windowsAccountAccess">
      <p>K Drive and Group Access</p>
      <div class="row">
        <div class="col-6">
          <label for="otherField1">Full Name</label>
          <input type="text" class="form-control w-100" id="otherField1" placeholder="Type Here...">
        </div>
        <br><br>
        <div class="col-6">
          <label for="otherField3">Employee ID</label>
          <input type="text" class="form-control w-100" id="otherField3" placeholder="Type Here...">
        </div>
        <br><br>
        <div class="col-6">
          <label for="otherField7">ONE ID (Formally Authenticator ID)</label>
          <input type="text" class="form-control w-100" id="otherField7" placeholder="Type Here...">
        </div>
        <br><br>
        <div class="col-6">
          <label for="otherField8"> Mirror Account ONE ID</label>
          <input type="text" class="form-control w-100" id="otherField8" placeholder="Type Here...">
        </div>
        <br><br>
        <div class="col-6">
          <label for="otherField9">Comments</label>
          <input type="text" class="form-control w-100" id="otherField9" placeholder="Type Here...">
        </div>
      </div>
    </div>



    <input type="submit" name="send" class="btn-submit" value="Send" />
    <div id="statusMessage">
      <?php
                                if (! empty($message)) {
                                    ?>
        <p class='<?php echo $type; ?>Message'>
          <?php echo $message; ?>
        </p>
        <?php
                                }
                                ?>
    </div>
  </form>
</div>

Please, could you add only the relevant code (JS) and HTML? Something like a [mcve] — Calvin Nunes, Sep 13 '21 at 19:46
There you go @Calvin Nunes I have update the code as you have requested — CruzzerK97, Sep 13 '21 at 20:07

score 0 · Accepted Answer · answered Sep 13 '21 at 20:12

The code you've provided contains more than I can help with, but I believe the following may help with your goal if I understand it correctly.

I have chosen to combine all of your secondary dropdowns into one, using jQuery and a trick for disabling dropdown options.

<script type="text/javascript">
    $(function() {
        // on page load wrap all select-2 options in span so they cannot be selected without specifying select-1
        $('#select-2 option:not([default])').wrap('<span/>');
    });

    // when select-1 is changed, hide all options that do not have the class corresponding to the value of select-1
    $('#select-1').change(function() {
        $('#select-2 span > option').unwrap();
        $('#select-2 option:not(.' + $('#select-1').val() + ', [default])').wrap('<span/>');
        // console.log($('#select-2').val());
    });
    $('#select-2').trigger('change');
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<label>Select 1</label>
<select id="select-1">
    <option default>Select</option>
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
    <option value="option-3">Option 3</option>
</select>
<br/>
<label>Select 2</label>
<select id="select-2">
    <option default>Select</option>
    <option value="option-1a" class="option-1">Option 1A</option>
    <option value="option-1b" class="option-1">Option 1B</option>
    <option value="option-1c" class="option-1">Option 1C</option>
    <option value="option-2a" class="option-2">Option 2A</option>
    <option value="option-2b" class="option-2">Option 2B</option>
    <option value="option-2c" class="option-2">Option 2C</option>
    <option value="option-3a" class="option-3">Option 3A</option>
    <option value="option-3b" class="option-3">Option 3B</option>
    <option value="option-3c" class="option-3">Option 3C</option>
</select>

At the moment whenever i refresh the page all the options from all are showing but when i select specific one then it hides. I want when the form is loaded on the select-1 -default show be AS400, select-2 default should be AS400 new Account and the the select-2 it should show the AS400 new Account input and when the user selects other it should hide the current option and display whatever the user has selected. — CruzzerK97, Sep 14 '21 at 01:34

Need Help - Hide/Show Options From Select when Selected

1 Answers1