javascript - 下拉菜单以记住选择并重定向用户,并能够更改所选国家/地区
问题描述
关注这个问题- 但是这个问题只提供一次性使用的解决方案。
我的问题是,当我有下拉菜单并从选择下拉菜单中选择某个城市时,我被重定向到城市页面,并且我的选择被保存到本地存储,所以每次我再次访问网站时,我都会被重定向到我选择的城市我的第一次网站访问。这可以。
我需要的是将此选择菜单放在网站的每个页面上,并且我需要能够随时更改它。因此,当我目前在纽约但明天我将在洛杉矶并且我想订购一些食物时,我只需在选择菜单中更改城市,它将设置一个新的主网站主页重定向到洛杉矶 URL 地址。
我试图将下拉列表放入每个页面 - 到标题,但是当我把它放在那里时,我陷入了重定向循环,所以当我第一次访问时在主页上选择纽约市并且下拉列表位于新页面上约克(例如在标题中)它通过无限重定向循环不断地将我从纽约重定向到纽约,这就是我需要消除的。
我的代码在这里。请问有什么想法吗?提供代码编辑会很棒,因为我是 JavaScript 的新手,我需要很长时间才能解决这个问题。非常感谢!
<script type="text/javascript">
if (localStorage && localStorage.country) {
location = localStorage.country;
}
function formChanged(form) {
var val = form.options[form.selectedIndex].value;
if (val !== 'non-value') {
if (localStorage) {
localStorage.country = val;
}
location = val;
}
}
</script>
<FORM NAME="form1">
<select onchange="formChanged(this);" NAME="country" SIZE="1">
<OPTION VALUE="non-value">Select delivery city
<OPTION VALUE="/kategoria-produktu/cadca/">New York
<OPTION VALUE="/kategoria-produktu/brno/">Los Angeles
<OPTION VALUE="/kategoria-produktu/bratislava/">Tokyo
</select>
</FORM>
更新 - 这工作正常,但是当我在当前页面 url 时,这个脚本没有显示实际选择的选项。任何想法如何解决这个问题?
<script type="text/javascript">
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;
}
}
}
</script>
<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 VALUE="/kategoria-produktu/cadca/">Čadca
<OPTION VALUE="/kategoria-produktu/brno/">Brno
<OPTION id="bratislava" VALUE="/kategoria-produktu/bratislava/">Bratislava
</select>
</FORM>
解决方案
代替
!location.href.indexOf(val)
写
location.href.indexOf(val) === -1
推荐阅读
- javascript - Laravel Passport API 向未使用付费号码的用户发送 OTP
- html - 无法使用 :link 选择器更改链接的颜色
- javascript - 使用 React 的地图加载不正确传单
- reactjs - 返回内部功能组件中的显示值
- javascript - 如何在 Chrome 的全局媒体控件中使用 blob URL 作为图像源?
- php - 如何缓存和重用 GuzzleHttp\Psr7\Response 的副本以进行调试?
- android - 大规模崩溃 org.altbeacon.beacon.service.ScanJob -> java.lang.RuntimeException: android.os.DeadSystemException
- node.js - Mongodb 连接池与单例线程
- angular - 实现自定义ckeditor构建到角度
- regex - 删除 pyspark 中的特定前导零