Question

我们有一个正在进行的wordpress广播网站构建，其中涉及用户通过条件下拉部分选择他们的地区和状态，并且将有一个提交按钮，将他们重定向到包含该位置特定内容的页面。

这是条件下拉列表的HTML代码

<form id="location" name="location">
    <table width="50%" border="0" cellspacing="0" cellpadding="5">
        <tr>
            <td width="59%" align="left" valign="middle">
                <select name="region" id="region">
                    <option value="">Select Your Region</option>
                    <option value="queensland">Queensland</option>
                    <option value="new_south_wales">New South Wales</option>
                </select>
            </td>
        </tr>
        <tr>
            <td align="left" valign="middle">
                <select disabled="disabled" id="state" name="state">
                    <option value>Select State</option>
                    <!-- Queensland -->
                    <option rel="queensland" value="">Beaudesert - 92.1 FM</option>
                    <option rel="queensland" value="">Biloela - 89.7 FM</option>
                    <option rel="queensland" value="">Canungra - 88.9 FM</option>
                    <option rel="queensland" value="">Chinchilla - 95.5 FM</option>
                    <option rel="queensland" value="">Cooktown - 92.1 FM</option>
                    <option rel="queensland" value="">Gold Coast - 100.6 FM</option>
                    <option rel="queensland" value="">Goondiwindi - 98.7 FM</option>
                    <option rel="queensland" value="">Logan - 92.1 FM</option>
                    <option rel="queensland" value="">Miles - 101.3 FM</option>
                    <option rel="queensland" value="">Monto - 100.5 FM</option>
                    <option rel="queensland" value="">Richmond - 104.5 FM</option>
                    <option rel="queensland" value="">Stanthorpe - 90.1 FM</option>
                    <option rel="queensland" value="">Taroom - 94.1 FM</option>
                    <option rel="queensland" value="">Theodore - 99.5 FM</option>
                    <option rel="queensland" value="">Weipa - 97.7 FM</option>

                    <!-- New South Wales -->
                    <option rel="new_south_wales" value="">Bourke - 107.3 FM</option>
                    <option rel="new_south_wales" value="">Gloucester - 97.7 FM</option>
                    <option rel="new_south_wales" value="">Tenterfield - 102.5 FM</option>
                </select>
            </td>
        </tr>
    </table>
</form>
<div id="submit_button"><a id="submit-btn" href="https://website.com/">Submit</a></div>

这是用于条件功能和重定向的Javascript

<script>
    $(function(){
        var $cat = $("#region"),
            $subcat = $("#state");

        $cat.on("change",function(){
            var _rel = $(this).val();
            $subcat.find("option").attr("style","");
            $subcat.val("");
            if(!_rel) return $subcat.prop("disabled",true);
            $subcat.find("[rel="+_rel+"]").show();
            $subcat.prop("disabled",false);
        });

    });
</script>
<script>
    document.getElementById("location").onchange = function() {
        document.getElementById("submit-btn").href = "https://website.com/"+this.value+"/";
    }
</script>

我想问一下如何实现一些cookie，以便当用户返回网站时，将加载上次访问的位置页面。关于这一方面的任何帮助将不胜感激。谢谢！

Answer 1

我有一个问题。为什么使用它

document.getElementById("location").onchange

我认为您需要为选择设置事件更改。
当用户返回网站时，如果要加载上次访问的位置页面，则需要将select的值保存到缓存中
您可以使用localStorage。
当用户更改选择时，
我们使用localStorage将数据保存到缓存中。
当用户返回网站时，我们会从缓存中获取数据并进行选择

使用Cookie进行条件下拉重定向

1 个答案: