Question

这里有一个复杂的，不确定是否可能。

下面是一段jQuery，它根据另一个选择下拉选项显示/隐藏一个选择下拉列表中的选项。该代码由一位成员在此处回复以前的问题编写。

代码有效地隐藏了'layout_select'中的选项，具体取决于'column_select'中选择的选项。但是，如果我选择

3列+布局4

按下保存按钮后，页面重新加载，所选选项再次变为布局3。如果我选择

，也会发生同样的情况

3列+布局5或2列+布局2

我需要jQuery在刷新时选择正确的选项。

这是我到目前为止所做的：

<select name="column_select" id="column_select">
    <option value="col1">1 column</option>
    <option value="col2">2 column</option>
    <option value="col3">3 column</option>
</select>

<select name="layout_select" id="layout_select">
    <!--Below shows when '1 column' is selected is hidden otherwise-->
    <option value="col1">none</option>

    <!--Below shows when '2 column' is selected is hidden otherwise-->
    <option value="col2_ms">layout 1</option> 
    <option value="col2_sm">layout 2</option>

    <!--Below shows when '3 column' is selected is hidden otherwise-->
    <option value="col3_mss">layout 3</option>
    <option value="col3_ssm">layout 4</option>
    <option value="col3_sms">layout 5</option>
</select>

jQuery：

$(document).ready(function() {
    var optarray = $("#layout_select").children('option').map(function() {
        return {
            "value": this.value,
            "option": "<option value='" + this.value + "'>" + this.text + "</option>"
        }
    })

    $("#column_select").change(function() {
        $("#layout_select").children('option').remove();
        var addoptarr = [];
        for (i = 0; i < optarray.length; i++) {
            if (optarray[i].value.indexOf($(this).val()) > -1) {
                addoptarr.push(optarray[i].option);
            }
        }
        $("#layout_select").html(addoptarr.join(''))
    }).change();
})

演示 - http://jsfiddle.net/N7Xpb/1/

我对javascript感到困惑，所以任何帮助都会非常感激。

Answer 1

我的建议是使用JQuery的cookie插件将选定的值（在选择选项更改后）存储在cookie中。

然后，在$（document）.ready（）中，您可以从这些存储的值中设置每个选项。

当选择其他选择下拉列表而不更改当前选项时，jQuery显示/隐藏一个选择下拉列表中的选项

1 个答案: