下拉菜单以记住选择并重定向用户

时间:2012-12-14 21:53:28

标签: javascript redirect drop-down-menu

我正在制作一个带有下拉菜单的登录页面,该菜单会将用户重定向到新目录。

http://steerbox.com/countryselect/

该部分正在运行,现在我需要添加代码以在选择国家/地区时设置Cookie,以便下次用户访问目标网页时,他们将自动重定向到该国家/地区的目录,而无需从再次下拉菜单。

我找到了jquery和javascript,它会在选择下拉菜单时设置cookie,但我似乎无法将下拉设置为设置cookie并仍然重定向用户。以下是我目前用于下拉和重定向的脚本:

<Script language="JavaScript">
function goto(form) { var index=form.select.selectedIndex
if (form.select.options[index].value != "0") {
location=form.select.options[index].value;}}
</SCRIPT>
<FORM NAME="form1">
<SELECT NAME="select" ONCHANGE="goto(this.form)" SIZE="1">
<OPTION VALUE="">Select Country
<OPTION VALUE="chile">Chile
<OPTION VALUE="colombia">Colombia
<OPTION VALUE="bolivia">Bolivia
</select>
</FORM>

谢谢!迪安

1 个答案:

答案 0 :(得分:1)

我同意yckart's comment并建议使用localStorage。

支持非常好(shown here)除非你需要支持IE7或更少,否则你应该没问题。

您可以像这样设置和检索数据:

localStorage.varName = 'bling';
var myVal = localStorage.varName;
// or:
localStorage['a little more flexibility'] = 'bling';

要使用此功能,您可以执行以下操作:

<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 Country
    <OPTION VALUE="chile">Chile
    <OPTION VALUE="colombia">Colombia
    <OPTION VALUE="bolivia">Bolivia
  </select>
</FORM>

http://jsfiddle.net/K4Jkc/

一种稍微保守的方法是在执行重定向之前将localStorage中存储的值(如果有的话)与select-list中的选项进行比较,如jsFiddle所示:

http://jsfiddle.net/K4Jkc/1/