Javascript 页面重新加载后更改下拉项目 Select 上的下拉按钮文本

发布于08月16日

基于这里的信息:change dropdown button text on dropdown items selection我想知道是否可以修改此代码以考虑页面重新加载.

我正试图从点击的下拉链接中获取文本，以便在刷新时保持在下拉按钮中.

$(".btn-toggle").on("click", function() {
  $('.dropdown-menu').toggleClass('open');
});
$(".dropdown-menu li").on("click", function() {
  $('.btn-toggle').text($(this).text());
  $('.dropdown-menu').removeClass('open');
});

只要不重新加载页面，这就可以很好地工作.

推荐答案

刷新时，所有变量都会重新启动，因此您需要将有关选定产品的信息保存到某种类型的storage.有几个选项，我会给你看我最喜欢的，这是Local storage(更多关于它的here)

因此，DO代码将如下所示:

$(".btn-toggle").text(
localStorage.getItem("selected") // get item from local storage
? localStorage.getItem("selected")
: "default" //YOUR DEFALUT BUTTON TEXT GOES HERE
);
$(".btn-toggle").on("click", function () {
$(".dropdown-menu").toggleClass("open");
});
$(".dropdown-menu li").on("click", function () {
$(".btn-toggle").text($(this).text());
localStorage.setItem("selected", $(this).text()); // save text to local 
storage
$(".dropdown-menu").removeClass("open");
});