时间戳

首页 > 解决方案 > jQuery 下拉菜单CSS 操作 我在这里尝试完成的基本上是利用 JQuery 根据下拉的选项值显示/隐藏元素。在这种情况下，我已经包含了一个段落，如您所见，默认选择了“RED”，现在我在这里要做的是在选择其余选项（蓝色/黑色/粉红色）时基本上隐藏该段落并且即使在页面刷新后该段落仍会继续隐藏，直到再次选择“RED”，谢谢！$(document).ready(function(){ function Blue() { $(".visible").css("display", "none")

问题描述

标签： javascripthtmljquerycss

解决方案

使用LocalStorage，您可以保存选择的值并检查DOMContentLoaded

我使用了一个函数并在选择的change和上运行它DOMContentLoaded

const select = document.getElementById('cars');
const paragraph = document.getElementById('visible');
const storageKey = 'carValue';

select.addEventListener('change', _ => checkvalue(select.value));
addEventListener('DOMContentLoaded', _ => checkvalue(localStorage.getItem(storageKey)));

function checkvalue(val) {
  if (val != 'Red') paragraph.style.display = 'none';
  else paragraph.style.display = 'all';

  localStorage.setItem(storageKey, val);
}
<select id="cars">
  <option value="Red" selected="selected">Red</option>
  <option value="Blue">Blue</option>
  <option value="Black">Black</option>
  <option value="Pink">Pink</option>
</select>

<p class="visible"> Visible Paragraph </p>

推荐阅读