Javascript 按钮更改下拉选择并用新选择重新加载小部件

我必须将一个Healcode小部件（通过心智体）合并到我正在工作的站点中。我的目标是让页面上的一个按钮更改Healcode小部件的下拉选择，并重新加载小部件以反映下拉更改

到目前为止，我已经能够创建一个按钮，在单击时将下拉选择更改为所需的值。但是，它不会重新加载小部件以反映更改。我仍然需要手动单击下拉列表才能实现这一点

感谢您的帮助！！以下是我目前掌握的情况：

HEALCODE下拉过滤器的HTML:

<div class="filters">
        <select name="mbo_class" id="mbo_class">
<option value="">All Classes</option><option value="58">200 hour Teacher Training</option>
<option value="3">Basics</option>
<option value="59">Basics/Power</option>
<option value="85">Basics/Restore + Meditation</option>
<option value="156">Cozy Winter YIN &amp; Restore</option>
<option value="23">Deep Stretch/YIN</option>
<option value="154">Express Power</option>
<option value="140">HIIT Power Yoga</option>
<option value="12">Music &amp; Power Yoga</option>
<option value="5">Power Yoga </option>
<option value="46">Power Yoga/Restore </option>
<option value="138">Simply Stretch</option>
<option value="30">Tween Yoga</option>
<option value="139">YOD (Yoga + HIIT)</option></select>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn3").click(function(){
    $("#mbo_class").val("3");
  });
});
</script>
<button id="btn3">Set Value</button>

全班200小时教师培训
基础
基础/动力
基础/恢复+冥想
舒适的冬季阴雨；恢复
深拉伸/阴
明示权力
HIIT力量瑜伽
音乐及；能量瑜伽
力量瑜伽
力量瑜伽/恢复
简单伸展
吐温瑜伽
YOD（瑜伽+HIIT）

HTML&JS用于更改选择的按钮：

<div class="filters">
        <select name="mbo_class" id="mbo_class">
<option value="">All Classes</option><option value="58">200 hour Teacher Training</option>
<option value="3">Basics</option>
<option value="59">Basics/Power</option>
<option value="85">Basics/Restore + Meditation</option>
<option value="156">Cozy Winter YIN &amp; Restore</option>
<option value="23">Deep Stretch/YIN</option>
<option value="154">Express Power</option>
<option value="140">HIIT Power Yoga</option>
<option value="12">Music &amp; Power Yoga</option>
<option value="5">Power Yoga </option>
<option value="46">Power Yoga/Restore </option>
<option value="138">Simply Stretch</option>
<option value="30">Tween Yoga</option>
<option value="139">YOD (Yoga + HIIT)</option></select>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn3").click(function(){
    $("#mbo_class").val("3");
  });
});
</script>
<button id="btn3">Set Value</button>

$（文档）.ready（函数（）{
$（“#btn3”）。单击（函数（）{
美元（“#mbo_类”）.val（“3”）；
});
});
设定值

我认为一个有效的解决方案可能是以某种方式捕获下拉列表更改为的内容，然后重新加载页面，但我的尝试迄今为止没有成功。以下是我的最新尝试：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn3").click(function(){
    $("#mbo_class").val("3");
  });

  var selectedProduct = sessionStorage.getItem("product");
if(selectedProduct != undefined || selectedProduct != null){
    $("mbo_class").first().find(":selected").removeAttr("selected");
  $("mbo_class").find("option").each(function () {
            if ($(this).val() == selectedProduct) {
                $(this).attr("selected", true);
            }
        });
}

$('mbo_class').change(function () {
    sessionStorage.setItem("product", $("mbo_class").first().val());

  location.reload();
});
</script>
<button id="btn3">Set Value</button>

$（文档）.ready（函数（）{
$（“#btn3”）。单击（函数（）{
美元（“#mbo_类”）.val（“3”）；
});
var selectedProduct=sessionStorage.getItem（“产品”）；
如果（selectedProduct！=未定义| | selectedProduct！=空）{
$（“mbo_类”）.first（）.find（“：selected”）.removeAttr（“selected”）；
$（“mbo_类”）。查找（“选项”）。每个（函数（）{
if（$（this）.val（）==selectedProduct）{
$（this）.attr（“选定”，true）；
}
});
}
$（'mbo_类'）。更改（函数（）{
sessionStorage.setItem（“产品”，美元（“mbo_类”）.first（）.val（）；
location.reload（）；
});
设定值

所以我找到了一个解决方案！这不是我计划的方向，但它是有效的！因为我实际上无法更改小部件的HTML–我所做的研究导致了很多死胡同

---

在HealCode小部件应用程序中，我为每个类类型（上面提到的过滤器选项）创建了一个版本的schedule小部件

然后我设置按钮来更改整个div id，以显示相关的schedule小部件（而不仅仅是过滤当前的schedule小部件）

我们将使用“Basics类”的过滤示例

以下是我的HTML代码：

<div id="widget-container">
  <healcode-widget data-type="schedules" data-widget-partner="object" data-widget-id="3c106917a43" data-widget-version="0">
</healcode-widget>

<a id="schedule-basics" class="button">Basics schedule</a>

基本进度表

以下是脚本–它将显示的计划更改为“基本类”计划（非常类似于过滤器选择）：

$（文档）.ready（函数（）{
var scheduleWidgetMarkup=''；
$（'body'）。在（'click'，'schedule basics'，函数（e）上{
e、 预防默认值（）；
$（'#小部件容器'）.html（scheduleWidgetMarkup）；
});
});