如何使用下拉列表调用jQuery函数，使下拉列表的onChange刷新div，而不仅仅是将函数结果添加到其中？

Question

背景

我给出了这个背景，以防我用错误的方式思考事情，这似乎是我的错。我正在尝试实现一个时区下拉列表，然后在目标div上运行这个jQuery代码( https://github.com/shonihei/weekly-scheduler-component )。所有代码都在HTML文件中。它是一个相当长的函数，它创建了一个div网格，其中列标题作为一周中的几天，行标题作为1小时块开始时间，并使用户能够选择div。我不想把所有的代码粘贴到这里，所以假设它在我的<script>标记中。我的集成背后的使用场景是：

1. 我有特定的时间可用。例如下午1点到下午5点，MST。

，

1. ，用户从下拉列表中选择他们的时区。例如，PST.
2. 基于他们的下拉选择，我的时间在调度器中转换成他们的时区，并且显示被更新，以便我的时间在他们的时间显示。例如，他们看到中午12点到下午4点。
3. ，他们可以在下拉列表中选择一个不同的时区，并获得该时区的更新时间表。

。

在我的尝试中我遇到了一些问题。一种是在每次下拉式更改时都会显示一个新的表，从而生成一个又一个表格的页面。另一个原因是，我真的不明白下拉列表如何调用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>

Answer 1

正如@MichaelChon在概念上所建议的那样，当下拉列表发生变化时，我首先尝试删除该表，我发现我可以使用.empty()来删除该表。

<script>
   $("#timezone_selector").change(function() {
      $('#target').empty();
      $('#target').weekly_schedule();
   });
</script>

似乎效果很好。