javascript - 如何使用 onchange 通过 jquery 更改显示(显示/隐藏)的列表？

Question

这是我的下拉菜单。

<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();


}`

但当它处于字母顺序选项时它会显示两个列表，而当我单击毕业选项时它什么也不显示。我不确定为什么会这样。如果你能帮忙，请告诉我。谢谢你的时间

Answer 1

考虑给定值的作用:

$(value).show();

如果值为 gradSort 那么你在做:

$("gradSort").show();

这是一个不正确的选择器。如果您按 id 查找，那么开头缺少 #。您可以将其添加到值中:

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

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

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

或:

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

it shows both lists when its on the Alphabetical option

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

chooseSort('#nameSort');

或:

chooseSort('nameSort');

(取决于您在上面使用的解决方案)