Javascript 从URL地址自动预选下拉列表值

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

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

我的URL看起来像/kategoria produktu/CITY U SELECT（/kategoria produktu/cadca/）

总而言之：当您访问url/kategoria produktu/cadca时，应在当前url上预选下拉菜单并显示Čadca

有什么办法可以解决这个问题吗？ 多谢各位

代码

JS

HTML

选择配送城市
Čadca
布尔诺
布拉迪斯拉发

因此，这里需要对一些小事情进行更改，以获得您想要的东西。我会尽量把它们都写下来：

您应该使用getItem和setItem访问localStorage，如

使用事件监听器而不是内联

onchange

属性，它更干净

您可能希望使用而不是indexOf，因为您正在字符串（href）中查找子字符串（country），indexOf不会为您这样做

我使用了

location.pathname

，因为您实际上只关心路径，所以有更好的方法来获得所需的确切路径参数

从您共享的代码中可以看出，无需使用

我从选项的value属性中删除了

/kategoria produktu/

，因为它是重复的，只在js中放置了一次

您应该将

选择的值更改为您想要作为默认选择的城市。您可以通过从路径解析出城市并将其设置为select上的
值
属性来完成此操作

我想就是这样，这里有一个例子，使用了上面的几点

const PREFIX=“kategoria produktu”；
addEventListener（'load'，function（））{
让countryInStorage=localStorage.getItem（“国家”）；
if（countryInStorage&&！location.pathname.includes（countryInStorage））{
location.href=`/${PREFIX}/${countryInStorage}`；
}
文件。getElementById（“saleTerm”）。添加的EventListener（“变更”，formChanged）；
setDefaultOption（）；
})
函数setDefaultOption（）{
让countryPath=location.pathname.split（“/”[2]；
if（countryPath）{
document.getElementById（“saleTerm”）.value=countryPath；
}
}
函数formChanged（）{
让selectedCountry=this.value；
如果（选择的国家/地区！=“非值”）{
if（本地存储）{
localStorage.setItem（“国家”，selectedCountry）；
}
如果（！location.pathname.includes（selectedCountry））{
location.href=`/${PREFIX}/${selectedCountry}`；
}
}
}

选择配送城市
Čadca
布尔诺
布拉迪斯拉发

如果我理解正确，您将看到基于URL的select元素中显示正确的选项

看看下面的例子。它基本上是在页面加载和DOM准备就绪时（因此

DOMContentLoaded

）运行一个进程，以检查基于URL的选项是否存在于select选项中，并选择该选项。您可能需要根据URL结构更新逻辑。下面的示例假定您的URL的格式始终为

http://your.domain.com/kategoria-produktu//

document.addEventListener（“DOMContentLoaded”，function（））{
//根据URL查找选项。
让option=document.querySelector（“#saleTerm>option[value='”+location.pathname+']”）；
//将选项值指定给select元素（如果存在）。
如果（选项）{
document.querySelector（“#saleTerm”）.value=option.value；
}
});

1）您知道您的HTML无效，对吗？缺少结束标记。2） 如果你能整理出JS缩进，那就太好了——这会让你更容易阅读并试图理解你的问题。@Mitya编辑，希望你现在能理解it@Mitya谢谢你的HTML提示。谢谢你的回复安德鲁！我尝试了你的解决方案，但仍然不起作用：//它像以前一样起作用。将我重定向到城市类别，但在“选择”下拉列表中未填充选定值。仍然可以看到“选择城市”选项。如果有任何选项可将“选择的城市”按值添加到选项中，那么当您位于Čadca url时，它应该看起来像Čadca，这可能会解决问题。因此，您希望下拉列表选择url中的同一城市吗？是，nmina提供的解决方案运行良好，但当我不选择任何城市时，它会让我转到/Undefined url字符串，这不好，因此主域example.com会让您重定向到example.com/Undefined谢谢！这就成功了！还有一个问题，当我没有选择任何内容时，为什么这个主URL会让我访问/未定义的URL？是否有机会更改/取消定义为其他内容？不客气！关于您的问题，

/undefined

可能发生在您设置location.href时，其中，参考示例代码，可能位于这一行

location.href=localStorage.country

。您可以添加一个条件来设置默认值，或者在localStorage.country最终未定义或为null时不执行重定向。

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;
   }
  }
 }

 <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>