点击页面下拉列表后其他下拉项选中值清空，如何阻止页面刷新？

我页面中有多个下拉列表（dropdownlist），为其中三个编写了JavaScript代码，点击任意下拉列表的选项时，其他下拉列表的选中值会被清空。我推测是页面刷新导致的，希望点击下拉列表选项时页面不刷新，请问有人能帮忙吗？我刚开始学习JavaScript，感谢任何帮助。

我的JavaScript代码如下：

<script language="JavaScript"> 
function getSelectValue() { 
  var selectedValue = document.getElementById("egitimkonusu").value; 
  window.location.href = "egitim?deger=" + selectedValue; 
  return selectedValue; 
} 
function getSelectValue2() { 
  var selectedValue2 = document.getElementById("eklenecek").value; 
  window.location.href = "/egitim?deger="+ getSelectValue() +"&"+"?eklenecekid=" + selectedValue2; 
} 
function getSelectValue3() { 
  var selectedValue3=document.getElementById("secili").value; 
  window.location.href="/egitim?deger="+ getSelectValue() +"&"+"?silinecekid="+selectedValue3; 
} 
</script>

你猜的完全没错！问题根源就是window.location.href——这个语句会直接触发页面跳转刷新，页面一刷新，所有DOM元素的状态都会重置，自然其他下拉框的选中值就没了。要实现无刷新操作，我们需要用异步请求（推荐用现代的fetch API）来和服务器交互，而不是直接跳转页面。

下面给你一步步修改的方案，适合新手理解：

1. 先修正URL拼接的错误 #

你原来的代码里URL拼接有个小问题：比如"?deger="+ getSelectValue() +"&"+"?eklenecekid"这里重复写了?，正确的URL参数格式是?参数1=值&参数2=值，只能有一个?开头，后面的参数都用&连接，这个先改过来。

2. 用fetch重写函数实现无刷新 #

把原来的跳转逻辑换成fetch发送异步请求，这样页面就不会刷新，下拉框的选中状态也能保留：

// 处理egitimkonusu下拉框的选择
function getSelectValue() {
  const selectedValue = document.getElementById("egitimkonusu").value;
  // 用fetch发送GET请求，不刷新页面
  fetch(`egitim?deger=${selectedValue}`)
    .then(response => {
      // 如果需要处理服务器返回的结果（比如提示成功），可以在这里加逻辑
      console.log("请求已发送，deger值：", selectedValue);
    })
    .catch(error => {
      console.error("请求出错了：", error);
    });
  return selectedValue;
}

// 处理eklenecek下拉框的选择
function getSelectValue2() {
  const deger = document.getElementById("egitimkonusu").value;
  const selectedValue2 = document.getElementById("eklenecek").value;
  // 正确拼接URL参数
  fetch(`/egitim?deger=${deger}&eklenecekid=${selectedValue2}`)
    .then(response => {
      console.log("添加请求已发送，参数：", deger, selectedValue2);
    })
    .catch(error => {
      console.error("请求出错了：", error);
    });
}

// 处理secili下拉框的选择
function getSelectValue3() {
  const deger = document.getElementById("egitimkonusu").value;
  const selectedValue3 = document.getElementById("secili").value;
  fetch(`/egitim?deger=${deger}&silinecekid=${selectedValue3}`)
    .then(response => {
      console.log("删除请求已发送，参数：", deger, selectedValue3);
    })
    .catch(error => {
      console.error("请求出错了：", error);
    });
}

3. 额外的新手友好提示 #

• 如果你需要在请求成功后更新页面内容（比如刷新某个列表），可以在fetch的.then()回调里写DOM操作，比如重新渲染指定区域的HTML。
• 建议给函数起更语义化的名字，比如sendEgitimKonusuSelection、sendAddRequest，这样你自己以后看代码也更容易明白。
• fetch是异步操作，如果你需要等待请求完成再做其他事，可以学习async/await语法，写法会更直观：

  async function getSelectValue() {
    const selectedValue = document.getElementById("egitimkonusu").value;
    try {
      const response = await fetch(`egitim?deger=${selectedValue}`);
      console.log("请求成功");
    } catch (error) {
      console.error("请求出错：", error);
    }
    return selectedValue;
  }
  

这样修改后，点击下拉框选项时页面就不会刷新，其他下拉框的选中值也能保留啦～

内容的提问来源于stack exchange，提问作者Özgün Dogan