JQuery 下拉 <select> CSS 操作

Question

我在这里主要想完成的是利用JQuery根据下拉列表的选项值显示/隐藏元素。

在这种情况下，我包含了一段，正如你所看到的"；红色"；现在我想在这里做的是，如果选择了其余选项(蓝色/黑色/粉红色(，基本上隐藏该段落，并且即使在页面刷新之后该段落也继续被隐藏；红色"；再次选择，

谢谢！

$(document).ready(function(){
function Blue()
{
$(".visible").css("display", "none");
}
function Black()
{
$(".visible").css("display", "none");
}
function Pink()
{
$(".visible").css("display", "none");
}
$('#cars').on('change', function() {

if ( $('#cars').val() == 'Blue' ) Blue();
else if ( $('#cars').val() == 'Black' ) Black();
else if ( $('#cars').val() == 'Pink' ) Pink();
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Answer 1

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

我使用了一个函数，并在select的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>

Answer 2

您可以使用localStorage

<select id="cars" onchange="myFunction()">
<option value="Red" selected="selected">Red</option>
<option value="Blue">Blue</option>
<option value="Black">Black</option>
<option value="Pink">Pink</option>
</select>
<p id="par" class="visible"> Visible Paragraph </p>
<script type="text/javascript">
var x = document.getElementById("cars").value;
if (localStorage.getItem("color") == null) {
localStorage.setItem("color", x)
}
function myFunction() {
var x = document.getElementById("cars").value;
localStorage.setItem("color", x)
console.log(localStorage.getItem("color"))
if (localStorage.getItem("color") === "Red") {
document.getElementById("par").style.display = "block"
} else {
document.getElementById("par").style.display = "none"
}
}
</script>

Answer 3

您可以使用单个jQuery链来完成此操作，该链添加更改侦听器，设置值，然后在页面加载时触发更改事件

$('#cars').on('change', function(){    
$('#info').toggle(this.value === 'Red');
localStorage.setItem('car_color', this.value)
}).val(localStorage.getItem('car_color') || 'Red').change();// trigger change on page load

存储支持的fiddle演示