javascript - 如何使用下拉菜单调用 jQuery 函数,以便下拉菜单的 onChange 刷新 div,而不仅仅是将函数结果添加到其中?
问题描述
背景
我给出这个背景,以防我以错误的方式思考事情,我似乎很可能是这样。我正在尝试实现一个时区下拉列表,然后
在目标 div 上运行这个 jQuery 代码( https://github.com/shonihei/weekly-scheduler-component )。所有代码都在 HTML 文件中。这是一个相当长的函数,它创建一个 div 网格,其中列标题为星期几,行标题为 1 小时块开始时间,并使用户能够选择 div。我不想将所有代码都粘贴到这里,所以假设它在我的<script>
标签内。我的集成背后的使用场景是:
- 我有特定的时间可用。例如,下午 1 点到下午 5 点 MST。我只显示那些时间的块。
- 用户从下拉列表中选择他们的时区。例如太平洋标准时间。
- 根据他们的下拉选择,我的时间会在调度程序中转换为他们的时区,并且显示会更新,以便我的时间显示在他们的时间中。例如,他们看到中午 12 点到下午 4 点的街区。
- 他们可以在下拉列表中选择不同的时区,并获取该时区的更新时间表。
我在尝试中遇到了很多问题。一个是我在每次下拉更改时都会显示一个新表格,从而导致页面显示表格后的表格。另一个是我真的不明白下拉菜单应该如何调用 jQuery 来用新日历刷新目标 div。这个问题是为了了解我应该如何使用创建这个调度程序的 jQuery 函数来考虑这个下拉列表,并看看它是如何正确完成的。我搜索了如何重置或清空 div,但我不确定这是否真的是我需要的。我是一个 jQuery 新手。
代码
这是 HTML,其中 jQuery 不起作用。
<label for="timezone_selector">Please select a time zone:</label>
<select id="timezone_selector"
required="required"
onChange="$('#target').weekly_schedule()">
<option value="" selected="selected" hidden="hidden">Click here</option>
<option value="gmt-7">Pacific, PDT (Daylight Savings) GMT-7</option>
<option value="gmt-8">Pacific, PST (Standard) GMT-8</option>
<option value="gmt-6">Mountain, MDT (Daylight Savings) GMT-6</option>
<option value="gmt-7">Mountain, MST (Standard) GMT-7</option>
<option value="gmt-5">Central, CDT (Daylight Savings) GMT-5</option>
<option value="gmt-6">Central, CST (Standard) GMT-6</option>
<option value="gmt-4">Eastern, EDT (Daylight Savings) GMT-4</option>
<option value="gmt-5">Eastern, EST (Standard) GMT-5</option>
</select>
<div class="container" style="margin: auto; width: 50%; height: 75%;
display: flex; flex-direction: row; justify-content: center;">
<div id="target">
</div>
</div>
我也试过
<script>
$("#timezone_selector").change(function() {
$('#target').weekly_schedule();
});
</script>
解决方案
正如@MichaelChon 在概念上建议的那样,我尝试在下拉列表更改时首先删除表格,我发现我可以这样做.empty()
<script>
$("#timezone_selector").change(function() {
$('#target').empty();
$('#target').weekly_schedule();
});
</script>
似乎运作良好。
推荐阅读
- python - LSTM,Keras:推理模型应该有多少层?
- c# - 大字节数组 - 在字节数组中存储长度有什么好处?
- java - postgres序列不递增
- postgresql - 将 postgresql 部署到 kubenetes
- javascript - 在 Heroku 上将应用程序投入生产后,Express 路线停止工作
- docker - 如何以最佳方式在多台物理机上部署 Kubernetes 集群?
- javascript - 如何将异步等待响应传递给 Vue?
- excel - 仅查找一列的所有选项
- postgresql - 将包含范围的行拆分为两个边界
- angular - 角度术语/数据绑定