javascript - 用于更改下拉选择并使用新选择重新加载小部件的按钮

Question

我必须将一个 Healcode 小部件(通过 Mind Body)合并到我正在使用的网站中。我的目标是让该页面上的按钮更改 Healcode 小部件的下拉选择，并重新加载小部件以反射(reflect)下拉更改。

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

感谢任何帮助!!这是我到目前为止所拥有的:

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>

用于更改选择的按钮的 HTML 和 JS:

<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>

我在想一个可行的解决方案可能是以某种方式捕获下拉菜单的更改内容，然后重新加载页面，但我的尝试到目前为止还没有奏效。这是我最近的尝试:

<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>

Answer 1

所以我找到了解决办法!这不是我计划去的方向，但它有效!由于我实际上无法更改小部件的 HTML——我所做的研究使我陷入了很多死胡同。

---

在 HealCode 小部件应用程序中，我为每个类(class)类型创建了一个版本的时间表小部件(上面提到的过滤器选项)。

然后我设置按钮以更改整个 div id 以显示相关的日程小部件。 (而不只是过滤当前的日程小部件。)

我们将使用“基础类(class)”的过滤示例。

这是我的 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>

这是脚本——它将显示的时间表更改为“基础类(class)”时间表(很像过滤器选择):

 $(document).ready(function() {
    var scheduleWidgetMarkup = '<healcode-widget data-type="schedules" data-widget-partner="object" data-widget-id="3c1218147a43" data-widget-version="1" ></healcode-widget>';
    $('body').on('click', '#schedule-basics', function(e) {
      e.preventDefault();
      $('#widget-container').html(scheduleWidgetMarkup);
    });
  });