如何使用 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&nbsp;value="#nameSort"&nbsp;selected>Alphabetical</option> <option&nbsp;value="#gradSort">Graduation&nbsp;Date</option>或者，如果出于其他原因您不想更改值，则可以将其添加到选择器中的字符串中：$('#'&nbsp;+&nbsp;value).show();或者：$(`#${value}`).show();当它在字母选项上时，它会显示两个列表听起来它在页面首次加载时显示了两个列表。如果是这种情况，您可以在页面加载时手动调用该函数来设置初始状态：chooseSort('#nameSort');或者：chooseSort('nameSort');（取决于您上面使用的解决方案）

Answer 2

该值本身将代表 的实际值option。因此，如果所选option值是gradSort您代码的这一部分$(value).show();将被指向$("gradSort").show();这不是 DOM 中的任何内容。因为它不是一个有效的选择器（标签），所以要使它工作，你应该#添加在您的查询选择器之前$('#'&nbsp;+&nbsp;value).show();或之前你的期权价值。<option&nbsp;value="#nameSort"&nbsp;selected>Alphabetical</option> <option&nbsp;value="#gradSort">Graduation&nbsp;Date</option>我将使用查询选择器选项，所以它将是这样的：function chooseSort(value) {&nbsp; $("#nameSort").hide();&nbsp; $("#gradSort").hide();&nbsp; $("#" + value).show();}$(document).ready(function() {&nbsp; chooseSort("nameSort");})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select id="sortBySelector" onchange="chooseSort(value)" style="display:block;border-color: #e0e0e0;">&nbsp; <option value="nameSort" selected>Alphabetical</option>&nbsp; <option value="gradSort">Graduation Date</option></select><div id="nameSort">nameSort</div><div id="gradSort">gradSort</div>

Answer 3

您需要一个条件来确定哪些将显示，哪些将保持隐藏。有几种不同的方法可以做到这一点，但我会这样做：<select id="sortBySelector" onchange="chooseSort(value)" style="display:block;border-color: #e0e0e0;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option id="nameSort' value="nameSort" selected>Alphabetical</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option id="gradSort value="gradSort">Graduation Date</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>function chooseSort(value) {&nbsp; if (value === 'nameSort'){&nbsp; &nbsp; &nbsp; &nbsp; $('#' + value).show(); // $("#nameSort").show(); would work&nbsp; &nbsp; &nbsp; &nbsp; $("#gradSort").hide();&nbsp; &nbsp; } else{&nbsp; &nbsp; &nbsp; &nbsp; $('#' + value).show(); // $("#gradSort").show(); would work&nbsp; &nbsp; &nbsp; &nbsp; $("#nameSort").hide();&nbsp; &nbsp; }}让我知道这个是否奏效！编辑：本着保持 HTML 相同的精神，我确实必须将 id 添加到每个选项以使其工作。另外，我不得不重做value.show()