Trying to hide dropdown selection w/ javascript

Question

I don't personally use js a lot, found this script on another forum. Can't seem to make it work. Trying to allow carwash type selection box to appear when the car wash service is selected, and be hidden otherwise. Sorry I am very new. When I tried the following; nothing happens.

<div h2 class="display-6 text-uppercase mb-3">Service</h2>
    </div>
        <script src="{% static 'website/js/bkingscpt.js' %}"></script>
        <span class="question">Select Service(s):</span><br>
        <input type="checkbox" id="car_wash" name="car_wash" value="car_wash"/>
        <label for="car_wash"> Car Wash</label><br>
        <input type="checkbox" id="window_cleaning" name="window_cleaning" value="window_cleaning"
        <label for="window_cleaning"> Window Cleaning</label><br>
        <input type="checkbox" id="power_wash" name="power_wash" value="Power Wash"
        <label for="power_wash"> Powerwashing</label><br>
        <input type="checkbox" id="curb_address" name="curb_address" value="curb_address"
        <label for="curb_address"> Curb Address Painting</label><br>
</div>
<div id="dropdownHolder" class="col-lg-12 mb-3">
    <select id="carwash_type" name="carwash_type" class="form-select form-control" aria-label="Default select example" value="ON">
        <option selected> Car Wash Type</option>
        <option value="1">Express Interior</option>
        <option value="2">Express Exterior</option>
        <option value="3">Full Service Wash</option>
     </select>
</div>

$('#dropdownHolder select').hide(); //initially dropdown is hidden
$('#car_wash').change(function() { //change click to hidden

  if ($(this).is(':checked')) { //check if checkbox is checked
    $('#dropdownHolder select').show(); //show if checked
  } else {
    $('#dropdownHolder select').hide(); //hide if unchecked
  }

})

Answer 1

The dropdown (selection box) isn't showing because jQuery wasn't loaded correctly.

See the snippet below. I've added jQuery above your HTML, and it works.

You mentioned in a comment that you have the code <script src="{% static 'website/js/jquery-1.11.0.min.js' %}">. Either there is a problem with this path (check spelling etc.) or that file does not exist on your server.

$('#dropdownHolder select').hide(); //initially dropdown is hidden
$('#car_wash').change(function() { //change click to hidden

  if ($(this).is(':checked')) { //check if checkbox is checked
    $('#dropdownHolder select').show(); //show if checked
  } else {
    $('#dropdownHolder select').hide(); //hide if unchecked
  }

})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<div h2 class="display-6 text-uppercase mb-3">Service</h2>
    </div>
        <script src="{% static 'website/js/bkingscpt.js' %}"></script>
        <span class="question">Select Service(s):</span><br>
        <input type="checkbox" id="car_wash" name="car_wash" value="car_wash"/>
        <label for="car_wash"> Car Wash</label><br>
        <input type="checkbox" id="window_cleaning" name="window_cleaning" value="window_cleaning"
        <label for="window_cleaning"> Window Cleaning</label><br>
        <input type="checkbox" id="power_wash" name="power_wash" value="Power Wash"
        <label for="power_wash"> Powerwashing</label><br>
        <input type="checkbox" id="curb_address" name="curb_address" value="curb_address"
        <label for="curb_address"> Curb Address Painting</label><br>
</div>
<div id="dropdownHolder" class="col-lg-12 mb-3">
    <select id="carwash_type" name="carwash_type" class="form-select form-control" aria-label="Default select example" value="ON">
        <option selected> Car Wash Type</option>
        <option value="1">Express Interior</option>
        <option value="2">Express Exterior</option>
        <option value="3">Full Service Wash</option>
     </select>
</div>