点击重置下拉列表

时间:2018-03-13 09:42:13

标签: javascript jquery

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

我想要的是在选择省和城市之后再次点击选择标记,它将在省选择时再次重置。

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

希望你了解我。

感谢

Codepen

Sub simpleXlsMerger()
Dim bookList As Workbook
Dim mergeObj As Object, dirObj As Object, filesObj As Object, everyObj As Object
 Application.ScreenUpdating = False
 Set mergeObj = CreateObject("Scripting.FileSystemObject")
 Set dirObj = mergeObj.Getfolder("\\C:\ update the target folder")
 Set filesObj = dirObj.Files
 'Here it will open each and every file in the target folder
 For Each everyObj In filesObj
 Set bookList = Workbooks.Open(everyObj)
Range("A2:IV" & Range("A65536").End(xlUp).Row).Copy
ThisWorkbook.Worksheets(1).Activate
' Paste it in the Macro sheet's non empty row
Range("A65536").End(xlUp).Offset(1, 0).PasteSpecial
Application.CutCopyMode = False
bookList.Close 
Next
End Sub

1 个答案:

答案 0 :(得分:2)

在选项选择期间将省和城市添加到localStorage。和 选择过程完成后,将值分配给新变量。然后从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>