javascript - 单击时重置下拉列表

Question

我有一个简单的下拉菜单，显示省份和城市。加载时，它首先显示省份，当我选择一个省份时，它会显示城市。

我想要的是选择省份和城市后，再次单击选择标签，它将在选择省份时再次重置。

我正在使用 localStorage 保存所选的省份和城市。

希望你能理解我。

谢谢

Codepen

function loadProvince(){
    $("#provinceCity").html("<option value=''>Select province</option>");
    for (var i=0; i<province.length; i++){
        $("#provinceCity").append("<option value='"+province[i]["id"]+"'>"+province[i]["name"]+"</option>");
    }
}


$(document).ready(function(){

    loadProvince();

    $("#provinceCity").change(function(){

        var selectedText = $("#provinceCity option:selected").text();
        if (localStorage.getItem("selectedProvince") === null) {
            localStorage.setItem("selectedProvince", selectedText);
        }else if (localStorage.getItem("selectedProvince") !== null) {
            localStorage.setItem("selectedCity", selectedText);
            var selectedProvinceCity = localStorage.getItem("selectedProvince") + "-" + localStorage.getItem("selectedCity");
            $('#provinceCity').append($('<option>', {
                value: selectedProvinceCity,
                text: selectedProvinceCity,
                selected: "selected"
            }));

            $(this).addClass("reset");
        }
        for (var i=0; i<province.length; i++){

            if ($(this).val() == province[i]["id"]){

                $("#provinceCity").empty();
                var cities = province[i]["city"];

                $("#provinceCity").html("<option value=''>Select city</option>");
                for (var j=0; j<cities.length; j++){
                    $("#provinceCity").append("<option value='"+cities[j]["id"]+"'>"+cities[j]["name"]+"</option>");
                }
            }
        }
    });
});

Answer 1

在选择选项时将省份和城市添加到localStorage。和 选择过程完成后将值分配给新变量。然后从本地存储中删除省份和城市，为下次更新准备选择框 Js文件

function showLocalStorageValues(){
  alert(localStorage.getItem("selectedProvinceCity"));
}

function loadProvince(){
   $("#provinceCity").html("<option value=''>Select province</option>");
  for (var i=0; i<province.length; i++){
    $("#provinceCity").append("<option value='"+province[i]["id"]+"'>"+province[i]["name"]+"</option>");
  }
}

$(document).ready(function(){
  $("#show").click(function(){
    showLocalStorageValues();
  });
  loadProvince();
  $("#provinceCity").change(function(){
    var selectedText = $("#provinceCity option:selected").text();
    if (localStorage.getItem("selectedProvince") === null) {
      localStorage.setItem("selectedProvince", selectedText);
    }else if (localStorage.getItem("selectedCity") === null){
      localStorage.setItem("selectedCity", selectedText);
      loadProvince();
      localStorage.setItem("selectedProvinceCity", localStorage.getItem("selectedProvince")+ "-" +selectedText);
      localStorage.removeItem('selectedProvince');
      localStorage.removeItem('selectedCity');
    }
    for (var i=0; i<province.length; i++){
      if ($(this).val() == province[i]["id"]){
        $("#clearBtn").show();
        var cities = province[i]["city"];
        $("#provinceCity").html("<option value=''>Select City</option>");
        for (var j=0; j<cities.length; j++){
          $("#provinceCity").append("<option value='"+cities[j]["id"]+"'>"+cities[j]["name"]+"</option>");
        }
      }
    }
  });
});

var province=[ 
  {
    "id": "820000",
    "name": "P1",
    "city": [ 
      {
        "id": "820001", "name": "C1P1"
      },
      {
        "id": "820002", "name": "C2P1"
      },
      {
        "id": "820003", "name": "C3P1"
      }
    ]
  },
  {
    "id": "830000",
    "name": "P2",
    "city": [ 
      {
        "id": "830001", "name": "C1P2"
      },
      {
        "id": "830002", "name": "C2P2"
      },
      {
        "id": "830003", "name": "C3P2"
      }
    ]
  }
];

HTML 文件

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="provinceCity">
  <option value=''>Select province</option>
</select>
<button id="show">show saved values</button>