来自 URL 地址的自动预 select 下拉值

Question

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

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

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

总结一下：当您访问 url /kategoria-produktu/cadca 时，下拉菜单应该在当前 url 之前 select 并显示 Č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

所以这里需要更改一些小东西才能让您得到想要的东西。我会试着把它们都写下来：

您应该像 localStorage MDN documentation
中那样使用 getItem 和 setItem 访问 localStorage
使用事件侦听器而不是内联 onchange 属性，它更简洁。
您可能想使用 includes 而不是 indexOf，因为您正在寻找字符串 (href) 中的子字符串（国家/地区），indexOf 不会为您执行此操作。
我使用了 location.pathname 因为你真的只关心路径，有更好的方法来获得你想要的确切路径参数。
据我从您分享的代码中可以看出，不需要使用 <form/>。
我从选项的值属性中删除了 /kategoria-produktu/，因为它是重复的，只在 js
中放置了一次
您应该将 select 的值更改为您想要的城市作为默认 selected。您可以通过从路径中解析出城市并将其设置为 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.

显示 select 元素的正确选项

看下面的例子。它基本上在页面加载时运行一个进程，当 DOM 准备好时（因此 DOMContentLoaded）检查 select 选项中是否存在基于 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;
  }
});

来自 URL 地址的自动预 select 下拉值

Auto pre-select dropdown value from URL address

html

javascript

select

option

dropdown