使用 setAttribute 更改 HTML 的脚本 src - 更改反映在 DOM 中，但唯一的原始 .js 继续运行

如何解决使用 setAttribute 更改 HTML 的脚本 src - 更改反映在 DOM 中，但唯一的原始 .js 继续运行

大家好。

我正在尝试使用下拉列表和按钮来更改链接的外部 .js 文件。目前我在两个 .js 文件中都编写了函数，它获取我设置的下拉列表的值，然后使用 setAttribute 更改 src。更改在 DOM 中正确反映（至少在 Chrome 开发工具中，请参阅屏幕截图）但我遇到的问题是它似乎并没有实际更改脚本，因为原始链接 .js函数仍在运行，更改后的链接 .js 脚本不会运行。我认为这可能是脚本运行/加载时的问题，但简单地移动 <script> 并不能解决问题。

任何见解将不胜感激！（下面的片段）

HTML：
<script id="pageScripts" src="UFS Scripts.js"></script>

<select value="UFS Scripts" id="scriptsSelect">
    <option value="UFS Scripts">Transition 01</option>
    <option value="UFS Scripts (alt transition 1)">Transition 02</option>
</select> <button target="#" onclick="selectScripts();">Change Transition</button>

JavaScript 更改函数（在两个外部 .js 文件中）：

function selectScripts()
{   
    var myScripts = document.getElementById('scriptsSelect').value;
    myScripts += ".js";
    document.getElementById('pageScripts').setAttribute("src",myScripts);
}

Screenshot - Selection 01

Screenshot - Selection 02