从 URL 地址自动预选下拉值

Question

我正在使用下拉选择菜单将用户重定向到选定的城市。我到处搜索这个主题并尝试了在 stackoverflow 上找到的许多解决方案，但每个都不起作用。在许多情况下，它甚至禁用了我的下拉菜单的重定向。所以我发布了一个新问题。希望有人能解决我的问题。

问题：当我访问 URL 时，我看到选择送货城市 - 非价值选项。它应该根据 URL 地址显示所选城市。

我的网址看起来像这样 /kategoria-produktu/CITY U SELECT (/kategoria-produktu/cadca/)

总结一下：当您访问 url /kategoria-produktu/cadca 时，下拉菜单应该在当前 url 上预先选择并显示 Čadca。

有什么想法可以解决这个问题吗？ 非常感谢！

代码

JS

if(location.href.indexOf(localStorage.country) == -1){
location.href = localStorage.country
}

function formChanged(form) {
var val = form.options[form.selectedIndex].value;
if (val !== 'non-value') {
if (localStorage) {
localStorage.country = val;
}

if (!location.href.indexOf(val)) {    
location = val;
   }
  }
 }

HTML

 <form name="form1">
 <select id="saleTerm" onchange="formChanged(this); location = 
 this.options[this.selectedIndex].value;" NAME="country" SIZE="1">
 <OPTION VALUE="non-value">Select delivery city</option>
 <OPTION VALUE="/kategoria-produktu/cadca/">Čadca</option>
 <OPTION VALUE="/kategoria-produktu/brno/">Brno</option>
 <OPTION id="bratislava" VALUE="/kategoria-produktu/bratislava/">Bratislava</option>
 </select>
 </form>

Answer 1

因此，您需要在此处进行一些小改动，以获得您想要的东西。我会尽量把它们都写下来：

1. 您应该使用 getItem 和 setItem 访问 localStorage，就像在 localStorage MDN documentation 中一样

2. 使用事件监听器代替内联的onchange 属性，这样更简洁。

3. 您可能希望使用includes 而不是 indexOf，因为您正在寻找字符串 (href) 中的子字符串 (国家)，indexOf 不会为您执行此操作。

4. 我使用了location.pathname，因为你真的只关心路径，有更好的方法来获得你想要的确切路径参数。

5. 据我从您分享的代码中可以看出，无需使用<form/>。

6. 我从选项的 value 属性中删除了 /kategoria-produktu/，因为它是重复的，并且只在 js 中放置了一次

7. 您应该将select 的值更改为您希望作为默认选择的城市。您可以通过从路径中解析出城市并将其设置为选择上的value 属性来做到这一点

我想就是这样，这里是使用上述几点的示例。

const PREFIX = "kategoria-produktu";
window.addEventListener('load', function() {
  let countryInStorage = localStorage.getItem("country");

  if (countryInStorage && !location.pathname.includes(countryInStorage)) {
    location.href = `/${PREFIX}/${countryInStorage}`;
  }

  document.getElementById("saleTerm").addEventListener("change", formChanged);
  setDefaultOption();
})

function setDefaultOption() {
  let countryPath = location.pathname.split("/")[2];

  if (countryPath) {
    document.getElementById("saleTerm").value = countryPath;
  }
}

function formChanged() {
  let selectedCountry = this.value;
  if (selectedCountry !== "non-value") {
    if (localStorage) {
      localStorage.setItem("country", selectedCountry);
    }

    if (!location.pathname.includes(selectedCountry)) {
      location.href = `/${PREFIX}/${selectedCountry}`;
    }
  }
}

<select id="saleTerm" name="country">
  <option value="non-value">Select delivery city</option>
  <option value="cadca">Čadca</option>
  <option value="brno">Brno</option>
  <option value="bratislava">Bratislava</option>
</select>

Answer 2

如果我理解正确，您正在考虑根据 URL 从选择元素中显示正确的选项。

看下面的例子。它基本上在页面加载和 DOM 准备就绪时（因此 DOMContentLoaded）运行一个进程，以检查选择选项中是否存在基于 URL 的选项并选择它。您可能需要根据 URL 结构更新您的逻辑。下面的示例假定您的 URL 始终采用http://your.domain.com/kategoria-produktu/<city>/ 的格式。

document.addEventListener("DOMContentLoaded", function() {
  // find the option based on the URL.
  let option = document.querySelector("#saleTerm > option[value='" + location.pathname + "']");

  // assign the option value to the select element if such exists.
  if (option) {
    document.querySelector("#saleTerm").value = option.value;
  }
});