如何使用下拉菜单调用 jQuery 函数，以便下拉菜单的 onChange 刷新 div，而不仅仅是将函数结果添加到其中？答案

【问题标题】：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?如何使用下拉菜单调用 jQuery 函数，以便下拉菜单的 onChange 刷新 div，而不仅仅是将函数结果添加到其中？
【发布时间】：2020-07-25 20:06:57
【问题描述】：

背景

我给出这个背景以防我以错误的方式思考事情，我似乎很可能是这样。我正在尝试实现一个时区下拉菜单，然后运行这个 jQuery 代码（ https://github.com/shonihei/weekly-scheduler-component ) 在目标 div 上。所有代码都在 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>

【问题讨论】：

“一个是我在每次下拉菜单更改时都会显示一个新表，导致页面显示一个又一个表”也许您应该在每次下拉更改时删除最后一个表？
这是个好建议。 $('#target').empty(); $('#target').weekly_schedule(); 有效。这是明智的，还是我应该使用其他东西？
如果您使用的 API 对此没有任何建议，那么我认为这是明智的解决方案。

标签： javascript html jquery drop-down-menu

【解决方案1】：

正如@MichaelChon 在概念上建议的那样，我尝试在下拉列表更改时首先删除表格，我发现我可以使用.empty() 来做到这一点

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

看起来效果不错。

【讨论】：