Search code examples
javascriptshow-hide

Hide Show select based on another select option

I'm an emerging developer attempting to get my show/hide function to work properly based on my select option of accesslevelid. I feel though as if i'm missing something in my javascript to get it to work properly to hide all options until the user selects accesslevelid value == 7 for the facility example.

My Django Template:

<select name ="accesslevelid" class="form-control my_select" id="accesslevelid">
        <option value=""> Please select your access level  </option>
        <option value="7"> Facility  </option>
        <option value="5"> Division  </option>
        <option value = "3"> Corporate  </option>
        <option value = "6"> Market  </option>
        <option value = "4"> Group  </option>
</select>
{% endif %}

{% block extra_js %}
    {{ block.super }}
    {{ form.media }}
  </br>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js" type="text/javascript"></script>
    <script src= "{% static '/accounts/chosen.jquery.js' %}" type="text/javascript"></script>
    <script src= "{% static '/accounts/facility_chosen.js' %}" type="text/javascript"></script>
    <link rel="stylesheet" href="{% static '/accounts/chosen.css' %}">
    <div>

     <em>Facility: </em>

     <select data-placeholder="Choose a Facility..." class="chosen-select" multiple tabindex="4" id = "id_facilitydimselect" value = "{{facility.coid}}" style="width: 1110px" >
       {% for facility in facilitydim %}
       <option value="{{facility.coid_name}}">{{facility.coid_name}}</option>
       {% endfor %}
     </select>

enter image description here

enter image description here

The javascript function I'm using (i have a javascript function for each box, i'm focusing on facility for this exercise):

$(document).ready(function () {
      $('#id_facilitydimselect').chosen();
      $('#accesslevelid').change(function () {
        $('.').hide();
        $('#' + $(this).val()).show();
      }
)
  ;
    }
  );

I have the following fiddle https://jsfiddle.net/42gvc3wk/4/

Solution

  • Using jquery, this will hide the facility div until the facility option has been selected, and hide it if something else is selected:

    $(document).ready(function() {
  $('#id_facilitydimselect').hide()
  $('#accesslevelid').change(function() {
    if ($(this).val() == 7) {
      $('#id_facilitydimselect').show()
    } else {
      $('#id_facilitydimselect').hide()
    }
  });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="accesslevelid" class="form-control my_select" id="accesslevelid">
  <option value=""> Please select your access level </option>
  <option value="7"> Facility </option>
  <option value="5"> Division </option>
  <option value="3"> Corporate </option>
  <option value="6"> Market </option>
  <option value="4"> Group </option>
</select>


</br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js" type="text/javascript"></script>
<script src="{% static '/accounts/chosen.jquery.js' %}" type="text/javascript"></script>
<script src="{% static '/accounts/facility_chosen.js' %}" type="text/javascript"></script>
<link rel="stylesheet" href="{% static '/accounts/chosen.css' %}">
<div>

  <em>Facility: </em>

  <select data-placeholder="Choose a Facility..." class="chosen-select" multiple tabindex="4" id="id_facilitydimselect" value="{{facility.coid}}" style="width: 1110px">
    {% for facility in facilitydim %}
    <option value="{{facility.coid_name}}">{{facility.coid_name}}</option>
    {% endfor %}
  </select>



  </br>

  <script src="{% static '/accounts/market_chosen.js' %}" type="text/javascript"></script>

  <div>
    <em>Market: </em>

    <select data-placeholder="Choose a Market..." class="chosen-select" multiple tabindex="4" id="id_marketdimselect" value="{{facility.dlevel}}" style="width: 1110px">
      {% for facility in facilitydim %}
      <option value="{{facility.market_name}}">{{facility.market_name}}</option>
      {% endfor %}
    </select>
  </div>
  <em>Division: </em>
  <script src="{% static '/accounts/division_chosen.js' %}" type="text/javascript"></script>
  <select data-placeholder="Choose a Division..." class="chosen-select" multiple tabindex="4" id="id_divisiondimselect" value="{{facility.rlevel}}" style="width: 1110px">
    {% for facility in facilitydim %}
    <option value="{{facility.division_name}}">{{facility.division_name}}</option>
    {% endfor %}
  </select>
</div>

<em>Group: </em>
<script src="{% static '/accounts/group_chosen.js' %}" type="text/javascript"></script>
<select data-placeholder="Choose a Division..." class="chosen-select" multiple tabindex="4" id="id_groupdimselect" value="{{facility.blevel}}" style="width: 1110px">
  {% for facility in facilitydim %}
  <option value="{{facility.group_name}}">{{facility.group_name}}</option>
  {% endfor %}
</select>

</div>
</br>
</br>
</br>
</br>
</br>


</div>
<div class="col">