Javascript 如何修改此脚本,使其在页面首次加载和更改时工作?
我有一个加载相关下拉选项的脚本。我添加了一个部件,当没有可用选项时,dependent下拉列表将隐藏。主下拉列表在提交后保留最新的提交数据,但当您提交一个在辅助下拉列表上没有选项的选项,并且页面重新加载时,主下拉列表(其中没有辅助选项)和辅助下拉列表都会显示,当您单击它时,它只是空的,因为检查是否应该隐藏的逻辑只会检查主下拉列表中是否有更改。如何在最后更改此脚本,使其在开始时和发生更改时都加载 进入退出区域.htmlJavascript 如何修改此脚本,使其在页面首次加载和更改时工作?,javascript,html,ajax,Javascript,Html,Ajax,我有一个加载相关下拉选项的脚本。我添加了一个部件,当没有可用选项时,dependent下拉列表将隐藏。主下拉列表在提交后保留最新的提交数据,但当您提交一个在辅助下拉列表上没有选项的选项,并且页面重新加载时,主下拉列表(其中没有辅助选项)和辅助下拉列表都会显示,当您单击它时,它只是空的,因为检查是否应该隐藏的逻辑只会检查主下拉列表中是否有更改。如何在最后更改此脚本,使其在开始时和发生更改时都加载 进入退出区域.html {% extends "base.html" %} {% load core
{% extends "base.html" %}
{% load core_tags staticfiles %}
{% block main %}
<form id="warehouseForm" action="" method="POST" data-stations-url="{% url 'operations:ajax_load_stations' %}" novalidate >
{% csrf_token %}
<div>
<div>
<label>Employee #</label>
{{ form.employee_number }}
</div>
<div>
<label>Work Area</label>
{{ form.work_area }}
</div>
<div id="my-hidden-div">
<label>Station</label>
{{ form.station_number }}
</div>
</div>
<div>
<div>
<button type="submit" name="enter_area" value="Enter">Enter Area</button>
<button type="submit" name="leave_area" value="Leave">Exit Area</button>
</div>
</div>
</form>
<script>
$("#id_work_area").change(function () {
var url = $("#warehouseForm").attr("data-stations-url");
var workAreaId = $(this).val();
var $stationNumberField = $("#{{ form.station_number.id_for_label }}");
$.ajax({
url: url,
data: {
'work_area': workAreaId
},
success: function (data) {
$("#my-hidden-div").show(); // show it
$stationNumberField.html(data);
// Check the length of the options child elements of the select
if ($stationNumberField.find("option").length === 1) {
$stationNumberField.parent().hide(); // Hide parent of the select node
} else {
// If any option, ensure the select is shown
$stationNumberField.parent().show();
}
}
});
});
</script>
{% endblock main %}
尝试将函数代码放入单独的函数中,因此
function someFunction() {
var url = $("#...
}
然后添加两个事件侦听器
$("#id_work_area").change(someFunction);
$(document).ready(someFunction);
我刚刚用您建议的更改更新了我的问题,但是我遇到了一个我似乎无法理解的错误,我不确定是否是我做了一些不正确的事情,因为在您的事件侦听器中没有调用函数括号。。。所以这是:$(“#id#u工作区”)。更改(装货站)$(文件)。准备就绪(装载站);而不是:$(“#id_工作区”).change(loadStations())$(文件)。准备就绪(装货站());这回答了你的问题吗?
function someFunction() {
var url = $("#...
}
$("#id_work_area").change(someFunction);
$(document).ready(someFunction);