[英]How to call a jQuery function with a dropdown so that the dropdown's onChange will refresh the div, not just add the function result to it?
我给出这个背景,以防我以错误的方式思考事情,我似乎很可能是这样。 我正在尝试实现一个时区下拉列表,然后在目标 div 上运行此 jQuery 代码( https://github.com/shonihei/weekly-scheduler-component )。 所有代码都在 HTML 文件中。 这是一个相当长的 function 创建一个 div 网格,其中列标题为星期几,行标题为 1 小时块开始时间,并使用户能够 select div。 我不想将所有代码都粘贴到这里,所以假设它在我的<script>
标记中。 我的集成背后的使用场景是:
我在尝试中遇到了很多问题。 一个是我在每次下拉更改时都会显示一个新表格,从而导致页面显示表格后的表格。 另一个是我真的不明白下拉菜单应该如何调用 jQuery 以使用新日历刷新目标 div。 这个问题是为了了解我应该如何使用创建此调度程序的 jQuery function 来考虑这个下拉列表,并查看它是如何正确完成的。 我搜索了如何重置或清空 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>
似乎运作良好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.