Question

我有3个表单选择下拉菜单，并在页面加载后成功保留了第一个选择值，但是无法保留第二个和第三个选择值。

我仅为此使用JavaScript和Jquery。

我已经一遍又一遍地尝试，终于将代码带到这里，看看更高级的人是否可以指出我做错的事情。

<form id="form">
  <select id="select0" type="text">
    <option type="text" value="" >make</option>
    <option type="text" value="ford" >ford</option>
  </select>
  <select id="select1" type="text">
    <option type="text" value="" >model</option>
    <option type="text" value="mustang" >mustang</option>
  </select>
  <select id="select2" type="text">
    <option type="text" value="">year</option>
    <option type="text" value="1967" >1967</option>
  </select>
  <input type="submit" value="go">
</form>the

// JavaScript
var storeMake = sessionStorage.getItem("themake");
var storeModel = sessionStorage.getItem("themodel");
var storeYear = sessionStorage.getItem("theyear");
var make = $("#form #select0");
var model = $("#form #select1");
var year = $("#form #select2");
if(storeMake != undefined || storeMake != null){
    make.find(":selected").removeAttr("selected");
    make.find("option").each(function () {
        if ($(this).val() == storeMake) {
            $(this).attr("selected", true);
        }
    });
}
if(storeModel != undefined || storeModel != null){
    model.find(":selected").removeAttr("selected");
    model.find("option").each(function () {
        if ($(this).val() == storeModel) {
            $(this).attr("selected", true);
        }
    });
}
if(storeYear != undefined || storeYear != null){
    year.find(":selected").removeAttr("selected");
    year.find("option").each(function () {
        if ($(this).val() == storeYear) {
            $(this).attr("selected", true);
        }
    });
}

make.change(function () {
    sessionStorage.setItem("themake", make.val());
});

model.change(function () {
    sessionStorage.setItem("themodel", model.val());
});

year.change(function () {
    sessionStorage.setItem("theyear", year.val());
});

Answer 1

jQuery .val()方法可用于设置选择的值。这将替换每个if语句。

尝试下面的代码。该代码段无法在Stack Overflow中使用，因为sessionStorage已禁用。

var storeMake = sessionStorage.getItem("themake"),
    storeModel = sessionStorage.getItem("themodel"),
    storeYear = sessionStorage.getItem("theyear");

$("#select0").val(storeMake).change(function () {
    sessionStorage.setItem("themake", $(this).val());
});
$("#select1").val(storeModel).change(function () {
    sessionStorage.setItem("themodel", $(this).val());
});
$("#select2").val(storeYear).change(function () {
    sessionStorage.setItem("theyear", $(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  <select id="select0">
    <option value="">make</option>
    <option value="ford">ford</option>
  </select>
  <select id="select1">
    <option value="">model</option>
    <option value="mustang">mustang</option>
  </select>
  <select id="select2">
    <option value="">year</option>
    <option value="1967">1967</option>
  </select>
  <input type="submit" value="go">
</form>

一些补充说明：

type或select元素上不需要option属性。
$("#form #select0")可以更新为$("#select0")。与select1和select2相同。

我在第一个下拉菜单中保留了选择期权的价值，但没有保留第二或第三次

1 个答案: