如何基于PHP生成的下拉选择框动态修改JS脚本src属性

这里有个落地的解决方案，结合你现有的PHP代码，加上一段前端JavaScript就能搞定下拉框选择后动态切换加载JS文件的需求：

完整代码示例 #

<!-- 保留你原来的PHP生成下拉框的代码 -->
<select id="s1" name="s1">
  <option value="" selected="selected">Select Employee</option>
  <?php foreach(glob(dirname(__FILE__) . '/*.js') as $filename){
    $filename = basename($filename, ".js");
    echo "<option value='" . $filename . "'>" . $filename . "</option>";
  } ?>
</select>

<!-- 给原script标签加个id，方便后续定位修改 -->
<script id="dynamic-js" src="data.js"></script>

<script>
// 获取下拉框和目标script元素
const selectMenu = document.getElementById('s1');
const targetScript = document.getElementById('dynamic-js');

// 监听下拉框的选择变化事件
selectMenu.addEventListener('change', function() {
  const selectedFileName = this.value;
  
  // 如果没选中有效选项，恢复默认的data.js
  if (!selectedFileName) {
    swapScript('data.js');
    return;
  }
  
  // 切换为选中的JS文件
  swapScript(`${selectedFileName}.js`);
});

// 封装替换script的函数，解决缓存问题
function swapScript(newSrc) {
  // 创建新的script元素
  const newScript = document.createElement('script');
  newScript.id = 'dynamic-js';
  newScript.src = newSrc;
  
  // 移除旧的script，插入新的
  targetScript.parentNode.replaceChild(newScript, targetScript);
  
  // 更新全局变量指向新元素，避免后续操作出错
  window.targetScript = newScript;
  
  // 可选：添加加载完成的回调
  newScript.onload = function() {
    console.log(`已成功加载 ${newSrc}`);
    // 这里可以写JS加载完成后的业务逻辑
  };
}
</script>

核心细节说明 #

• 给原<script>标签加了id="dynamic-js"，这样能精准定位到要修改的元素，避免影响页面其他script标签。
• 采用替换整个script元素的方式，而不是直接修改src属性，这能避免浏览器缓存旧JS文件的问题，确保每次选择都加载最新的文件内容。
• 处理了未选中有效选项的边界情况，会自动恢复到默认的data.js。
• 把替换逻辑封装成swapScript函数，让代码更清晰，后续维护或扩展更方便。

额外提示 #

• 确保你的JS文件都和当前PHP脚本在同一目录下，如果文件在子目录里，需要调整swapScript里的路径（比如改成js/${selectedFileName}.js）。
• 如果需要处理JS加载失败的情况，可以给新script元素添加onerror事件监听：

  newScript.onerror = function() {
    console.error(`加载 ${newSrc} 失败`);
    // 这里可以写错误处理逻辑，比如恢复默认文件
  };
  

内容的提问来源于stack exchange，提问作者OverflowingTheGlass