隱藏根據另一個選擇選項顯示選擇

Question

我是一個新興的開發人員，試圖根據我的accesslevelid的select選項使show / hide功能正常運行。 我覺得好像我在我的JavaScript中缺少某些東西一樣，以使其正常工作以隱藏所有選項，直到用戶為設施示例選擇accesslevelid值== 7為止。

我的Django模板：

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

我正在使用的javascript函數（每個框都有一個javascript函數，我專注於本練習的工具）：

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

我有以下小提琴https://jsfiddle.net/42gvc3wk/4/

Answer 1

使用jquery，這將隱藏設施div，直到選擇了設施選項，如果選擇了其他選項，則將其隱藏：

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