如何实现下拉选择框选择选项后加载外部页面内容

嘿，我明白你的需求了！原来的代码只是把选中选项的链接文本显示出来，现在要改成选择后加载外部页面的HTML内容对吧？咱们可以用Fetch API来实现异步加载，这是现代浏览器支持的简洁方案，下面给你完整的实现步骤和代码：

步骤1：调整下拉选项的配置 #

首先，我们把每个选项的value改成对应外部内容的标识（或者直接是外部HTML文件的路径，比如city1.html、city2.html，这些文件里就是你要加载的<h1>和<p>内容）：

<select name="unidade" id="unidade" onChange="AbrirSecao(this.value)"> 
  <option value="">Selecione sua Cidade</option> 
  <option value="city1.html">Sua Cidade 1</option> 
  <option value="city2.html">Sua Cidade 2</option> 
</select> 
<div id="content"></div> <!-- 用div比p更适合承载复杂HTML内容 -->

步骤2：重写JavaScript加载函数 #

把原来的AbrirSecao函数改成用Fetch获取外部内容，并插入到页面中，同时处理加载失败的情况：

function AbrirSecao(contentUrl) {
  const contentContainer = document.getElementById('content');
  
  // 如果没选择有效选项，清空内容
  if (!contentUrl) {
    contentContainer.innerHTML = '';
    return;
  }

  // 用Fetch异步加载外部HTML内容
  fetch(contentUrl)
    .then(response => {
      if (!response.ok) {
        throw new Error(`加载失败：${response.status}`);
      }
      return response.text();
    })
    .then(htmlContent => {
      // 将获取到的HTML解析后插入容器
      contentContainer.innerHTML = htmlContent;
    })
    .catch(error => {
      // 加载出错时显示友好提示
      contentContainer.innerHTML = `<p>⚠️ 内容加载失败：${error.message}</p>`;
    });
}

关键细节说明 #

• 为什么用innerHTML而非textContent？因为你要加载的是带标签的HTML内容，textContent会把标签当成普通文本显示，innerHTML才会正确解析成页面元素。
• 同源策略提醒：如果是本地直接打开HTML文件（file://协议），浏览器可能会阻止Fetch请求，建议用本地服务器运行（比如VS Code的Live Server插件，或者Node.js的http-server工具）。
• 如果你的内容是固定小片段，也可以不用额外HTML文件，直接把内容存在JS对象里：

  const cityContents = {
    city1: `<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula tortor metus, laoreet condimentum urna aliquet vitae. Aliquam eu felis malesuada, maximus risus nec, aliquet leo</p>`,
    city2: `<h1>另一个城市的标题</h1><p>对应城市的描述内容...</p>`
  };
  // 此时下拉选项value可以设为"city1"、"city2"，函数里直接取对象内容即可
  

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