时间戳

首页 > 解决方案 > 如何使用 onchange 更改使用 jquery 显示（显示/隐藏）的列表？

javascript - 如何使用 onchange 更改使用 jquery 显示（显示/隐藏）的列表？

问题描述

这是我的下拉菜单。

<select id="sortBySelector" onchange="chooseSort(value)" style="display:block;border-color: #e0e0e0;">
                    <option value="nameSort" selected>Alphabetical</option>
                    <option value="gradSort">Graduation Date</option>


                </select>

我有两个<ul>id="nameSort" 和 "gradSort" 我写了 jquery 代码，只显示选定的一个。我试过这个

<script>
function chooseSort(value) {
    $("#nameSort").hide();
    $("#gradSort").hide();
    $(value).show();


}`

但是当它在字母选项上时它会显示两个列表，当我单击毕业选项时它什么也不显示。我不确定为什么会这样。如果您能提供帮助，请告诉我。感谢您的时间

标签： javascripthtmljquerycssasp.net-mvc

解决方案

考虑一下这对给定值做了什么：

$(value).show();

如果值是gradSort那么你正在做：

$("gradSort").show();

这是一个不正确的选择器。如果您正在寻找，id那么它#在开始时会丢失。您可以将其添加到值中：

<option value="#nameSort" selected>Alphabetical</option>
<option value="#gradSort">Graduation Date</option>

或者，如果出于其他原因您不想更改值，则可以将其添加到选择器中的字符串中：

$('#' + value).show();

或者：

$(`#${value}`).show();

当它在字母选项上时，它会显示两个列表

听起来它在页面首次加载时显示了两个列表。如果是这种情况，您可以在页面加载时手动调用该函数来设置初始状态：

chooseSort('#nameSort');

或者：

chooseSort('nameSort');

（取决于您上面使用的解决方案）

推荐阅读