JQuery 下拉菜单<select>CSS 操作

Question

我在这里尝试完成的基本上是利用 JQuery 根据下拉列表的选项值显示/隐藏元素。

在这种情况下，我已经包含了一个段落，如您所见，默认情况下选择了“红色”，现在我想要在这里做的是，如果选择了其余选项（蓝色/黑色/粉红色），则基本上隐藏该段落并且即使在页面刷新后仍继续隐藏该段落，直到再次选择“RED”，

谢谢 ！

 $(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

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

您可以使用本地存储

<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

存储支持的小提琴演示