javascript - 选择值列表时的浏览器后退按钮

Question

当提交表单后单击浏览器后退按钮时，我试图保留下拉选项中的值列表。我尝试使用 Ben Alman 的 bbq jquery，但没有成功。 Here's我一直在尝试什么。请帮忙。

非常感谢。

HTML

<form action="something.py" id="formName">
    <table id = "tabName">
        <tr>
            <th>Name</th><th>Number</th>
        </tr>
        <tr>
            <td>
                <select id="myname" name="myname">
                    <option value="a">a</option>
                    <option value="b">b</option>
                    <option value="c">c</option>
                </select>
            </td>
            <td>
                <select id="mynumber" name="mynumber">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </td>
        </tr>
    </table>
    <input type="submit" value="submit" />
</form>

JQuery:

var selected_value = [];
$('#mynumber').change(function() {
    var name = $('#myname').val();
    var number = $('#mynumber').val();

    $("#tabName tr:last").before("<tr><td>" + name + "</td><td>" + number + "</td></tr>");
    selected_value.push(name);
});

$('#formName').submit(function() {
    $.bbq.pushState({
        values: selected_value
    });
    //return false;
});

$(window).bind("hashchange", function(e) {
    var values = $.bbq.getState("url");
    if (selected_value === values) {
        $(this).addClass("current");
    } else {
        $(this).removeClass("current");
    }
});

Answer 1

我基于 location.hash 的解决方案(没有 cookie 或 localStorage):

function addRow(name, number){
    $("#tabName tr:last").before("<tr><td>" + name + "</td><td>" + number + "</td></tr>");
}

$(function(){
    if(location.hash){
        var rows = location.hash.substr(1).split(';');
        for(var i = 0; i < rows.length; i++){
            var row = rows[i].split(',');
            if(row.length == 2){
                addRow(row[0], row[1]);
            }
        }
    }

    $('#mynumber').change(function() {
        var name = $('#myname').val();
        var number = $('#mynumber').val();
        location.hash = location.hash + (location.hash ? ';' : '') + name + ',' + number;
        addRow(name, number);
    });
});

我认为它可以满足您的要求 - 如果没有，请在评论中给我一些反馈。