Smart Select - javascript to update selection?

“Newbie” here, transitioning a small old mobile website from vintage framework7 v1 to new v5.7.

I had an input form with several dropdown boxes. In v1 version I just used the native input dropdown HTML tag. I have a @change function() that changes selection in dropdown box 1 when something is selected in dropdown box 3. Using the analogous kitchensink example below, let’s say next dropdown box would be “desktop-laptop”. I want to put a constrain where laptop is selected, the mac-windows selection will default back to mac.

I implemented my old input form with Smart Select bottom sheet like this kitchensink example.
Previously my old javascript would simply set mac-windows.selectedIndex=0 and the native dropdown box would reflect the change. In the new Smart Select UI, when I tap and open the bottom sheet, “Mac” is appropriately check-marked by the @change javascript, but the “item-after” gray placeholder retains the previous “Windows” selection and does not reflect the update.

I thought about using the new Picker as well.

Any insight is appreciated.

<li>
  <a class="item-link smart-select smart-select-init" data-open-in="sheet">
    <select name="mac-windows">
      <option value="mac" selected>Mac</option>
      <option value="windows">Windows</option>
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Mac or Windows</div>
      </div>
    </div>
  </a>
</li>
```\