加载带有选择 OnChange 事件的涡轮帧？答案

【问题标题】：Load a turbo frame with a select OnChange event?加载带有选择 OnChange 事件的涡轮帧？
【发布时间】：2022-06-13 23:56:46
【问题描述】：

我有一个嵌套表单，其中嵌套表单项取决于主表单中的选择。我将表单的嵌套部分放在涡轮框架中。我有手动链接来更新这样的框架：

<a data-turbo-frame="items" href="http://localhost:3000/parent_model/new?nested_id=2">Second Nested Item</a>

我想要现有的选择而不是链接，我必须在更改时动态重新加载该框架。

我发现了这个：https://discuss.hotwired.dev/t/how-to-use-turbo-visit-and-target-a-specific-frame/2441，它提供了一个类似的解决方案：

let frame = querySelector(‘turbo-frame#your-frame’)
frame.src = ‘/my/new/path’
frame.reload()

我仍在寻找像 onChange... 这样的直接优雅的衬垫，而不是看起来像完整的刺激控制器等。

【问题讨论】：

你是不是想明白了，还是你往另一个方向走？我也有同样的问题。

标签： javascript ruby-on-rails turbolinks

【解决方案1】：

您可以从网页上的某些元素触发事件：

为您的网页添加涡轮框架：

 <turbo-frame id="my-frame" src="/my/path">
 </turbo-frame>

在页面某处添加一个输入元素，比如一个按钮，并带有onclick()：
```
 <input class="btn" name="123" id="btn" onclick="update_my_frame(name)">
```

在onclick()触发的JS函数中，可以加载/重新加载turbo frame：

 <script>
     update_my_frame(name) {
     // console.log(name);
     let frame = document.querySelector('turbo-frame#my-frame')
     frame.src = '/my/path' // => loads turbo-frame
     // ...
     frame.src = '/my/new/path'
     frame.reload() // => reload turbo-frame with updated src
 }
 </script>

【讨论】：

【解决方案2】：

<select 
    onchange="
        const frame = document.getElementById('my-frame');
        frame.src=event.target.value;
        frame.reload();"
>
    <option value="/examples">Examples</option>
    <option value="/help">Help</option>
    <option value="/faq">FAQs</option>
</select>

【讨论】：