下拉菜单记住选择和重定向用户 [英] Drop down menu to remember selection and redirect user

问题描述

我正在制作一个带有下拉菜单的着陆页，将重定向到新的目录。

I am making a landing page with a drop down menu which will redirect users to a new directory.

http://steerbox.com/countryselect/

该部分正在工作，现在我需要添加代码以在国家/地区被选中时设置Cookie，以便下次用户访问着陆页时，他们将自动被重定向到该国家的目录，而不必再次从下拉菜单中选择。

That part is working and now I need to add code to set a cookie when the country is selected, so that the next time the user visits the landing page they will automatically get redirected to that country's directory without having to select from the drop down menu again.

我发现了jquery和javascript，它会将cookie设置为选择下拉菜单，但是我似乎无法将下拉列表设置为设置cookie仍然重定向用户。以下是我目前用于下拉和重定向的脚本：

I have found jquery and javascript which will set the cookie on selection of the drop down, but I can't seem to get the drop down to both set the cookie and still redirect the user. Following is the script that I am currently using for the drop down and redirect:

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

谢谢！ Dean

推荐答案

我同意 yckart的评论，并建议使用localStorage。

I agree with yckart's comment and suggest using localStorage.

支持非常好（<一个href =http://caniuse.com/#search=localst =nofollow noreferrer>此处显示），除非您需要支持IE7或更少，否则您应该可以。

The support is pretty good (shown here) and unless you need to support IE7 or less you should be ok.

您可以设置和恢复这样的数据：

You can set and retrive data like this:

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

要使用此功能，您可以执行以下操作：

To use this, you could do the following:

<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中的值如果有一个）在执行重定向之前在选择列表中的选项，如这个jsFiddle所示：

An approach that would be a little more conservative would be to compare the value stored in localStorage (if there is one) to options in the select-list before doing the redirect, as shown in this jsFiddle:

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

这篇关于下拉菜单记住选择和重定向用户的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！