根据另一个 select 选项隐藏显示 select

Question

我是一名新兴开发人员，试图根据我的 select accesslevelid 选项使我的 show/hide 功能正常工作。我觉得好像我的 javascript 中遗漏了一些东西以使其正常工作以隐藏所有选项，直到用户 selects accesslevelid value == 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();
      }
)
  ;
    }
  );

我有以下fiddlehttps://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">

根据另一个 select 选项隐藏显示 select

Hide Show select based on another select option

javascript

show-hide