单击时重置下拉列表 [英] Reset Dropdown list on click

问题描述

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

I have this simple dropdown menu that display provinces and cities. On load it display first the provinces, when I select one province it will display the cities.

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

What I want is after selecting the province and city and I click again on the select tag, it will reset again on the selection of the province.

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

I'm using localStorage to save the selected province and city.

希望你能理解我.

谢谢

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>");
                }
            }
        }
    });
});

推荐答案

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

Add province and city to localStorage during the time of option selection. And assign the values to new variable after the selection process is completed. Then remove the province and city from localstorage for preparing selection box for the next updation Js file

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>

这篇关于单击时重置下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！