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

Question

我必须将 Healcode 小部件（通过 Mind Body）合并到我正在处理的网站中。我的目标是让该页面上的按钮更改 Healcode 小部件的下拉选择，并重新加载小部件以反映下拉更改。

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

感谢任何帮助！！这是我目前所拥有的：

HTML 对于 HEALCODE 下拉过滤器：

<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 以显示相关的计划小部件。（而不只是过滤当前的日程小部件。）

我们将使用过滤示例 "Basics 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>

这是脚本——它将显示的时间表更改为 "Basics 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);
    });
  });

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

Button to change dropdown selection and reload widget with new selection

javascript

jquery

html

drop-down-menu

mindbody