如何使用 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>

我有两个id分别为"nameSort"和"gradSort"的<ul>元素。我编写了JQuery代码，它将只显示所选元素。我尝试了以下代码：

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


}`

但是，当选择字母顺序选项时，它会显示两个列表，并且在我单击毕业选项时什么也不显示。 我不确定为什么会发生这种情况。 如果您能帮忙，请告诉我。 谢谢您的时间。

- Fairy Song

---

你能发布你的剩余HTML代码吗？我看到你尝试过了，但只显示了一部分。这将非常有帮助！ - AttemptedMastery

你想看哪个部分？ - Fairy Song

就我所知，hide() 在选项上不起作用。如果您想隐藏选项（尽管我不明白为什么需要这样做，因为一旦隐藏了一个选项，您将无法再次选择它），最好的方法是使用 spans 包装它们并隐藏这些 spans。 - Jay Nyxed

Answer 1

考虑给定值时，这段代码在做什么：

。

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

根据您在上面使用的解决方案。

- David

Answer 2

该值本身将表示option的实际值。因此，如果所选的option值为gradSort，则您代码的这部分

$(value).show();

将会指向

$("gradSort").show();

它在DOM中没有任何引用。因为它不是一个有效的选择器(标签)，所以要使其工作，您应该在查询选择器之前添加#

。

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

或者在您的选项值之前。

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

我会选择查询选择器，所以代码大概是这样的：

function chooseSort(value) {
  $("#nameSort").hide();
  $("#gradSort").hide();
  $("#" + value).show();
}

$(document).ready(function() {
  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;">
  <option value="nameSort" selected>Alphabetical</option>
  <option value="gradSort">Graduation Date</option>
</select>

<div id="nameSort">nameSort</div>
<div id="gradSort">gradSort</div>

- SMAKSS

---

如何确保打开页面时自动选择名称排序？我尝试了selected标签，但似乎没有任何反应。 - Fairy Song

@TerriSong 只需要在页面加载时调用您的函数一次。像这样 chooseSort("nameSort"); - SMAKSS

Answer 3

你需要一个条件语句来确定哪个将被显示，哪个将保持隐藏。有几种不同的方法可以实现这一点，但我会这样做：

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


                </select>

function chooseSort(value) {
  if (value === 'nameSort'){
        $('#' + value).show(); // $("#nameSort").show(); would work
        $("#gradSort").hide();
    } else{
        $('#' + value).show(); // $("#gradSort").show(); would work
        $("#nameSort").hide();
    }
}

如果这个可行，请告诉我！

编辑：为了保持您的HTML不变，我必须添加每个选项的ID才能使其正常工作。此外，我不得不重新做value.show()。

- AttemptedMastery

---

如果你要使用 switch，你会如何实现这个？ - Fairy Song

它适用于第二个标签，但您需要预先选择第一个选项才能使其工作。 - Fairy Song