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

Question

I have to incorporate a Healcode widget (through Mind Body) into the site I'm working on. My goal is to have a button on that page change the dropdown selection of the Healcode widget and reload the widget to reflect the dropdown change.

So far I've been able to create a button that changes the dropdown selection to the desired value when clicked. However it does not reload the widget to reflect the change. I still have to manually click the dropdown to make that happen.

Any help is appreciated!! Here's what I have so far:

HTML FOR THE HEALCODE DROPDOWN FILTERS:

<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 FOR BUTTON TO CHANGE THE SELECTION:

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

I'm thinking a working solution might be somehow capturing what the dropdown is changed to and then reloading the page, but my attempts have not worked thus far. Here's my latest attempt:

<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

So I found a solution! It isn't quite the direction I was planning to go, but it works! Since I can't actually change the HTML of the widget–the research I was doing led me to a lot of dead ends.

---

In the HealCode widget app, I created a version of the schedule widget for each class type (the filter options mentioned above).

Then I set the button to change the entire div id to display the correlated schedule widget. (Rather than just filtering the current schedule widget.)

We'll use the example of filtering for the "Basics Class".

Here's my HTML code:

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

Here's the script–which changes the schedule displayed to the "Basics Class" schedule (much like the filter selection would):

 $(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);
    });
  });