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

Posted 2023-05-08

【中文标题】如何使用 onchange 更改使用 jquery 显示（显示/隐藏）的列表？

【英文标题】：How do I use onchange to make a changes to which list is shown (show/hide) by using jquery?

【发布时间】：2020-10-07 18:47:49

【问题描述】：

这是我的下拉菜单。

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


`

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

【问题讨论】：

您可以发布其余的 html 代码吗？我看到你试过了，但只有一部分出现了。这将有很大帮助！

你想看哪一部分

据我所知hide() 不适用于选项。如果你想隐藏选项，你最好的选择（我不明白你为什么需要它，你将无法再次选择，因为一个选项将被隐藏）是用跨度包装它们并隐藏这些跨度跨度>

【参考方案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');

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

【参考方案2】：

值本身将代表option 的实际值。所以如果选择的option值是gradSort这部分你的代码

$(value).show();

将被指向

$("gradSort").show();

不是指 DOM 中的任何东西。因为它不是一个有效的选择器(tag)，所以要让它工作，你应该添加#或者

在您的查询选择器之前

$('#' + 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>

【讨论】：

如何确保在打开页面时自动选择 namesort？我尝试了选定的标签，但似乎没有任何反应

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

【参考方案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()

【讨论】：

如果你使用 switch，你会如何实现这个？

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