[英]Hide Show select based on another select option
我是一个新兴的开发人员,试图根据我的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();
}
)
;
}
);
使用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">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.