Javascript '；fadeToggle'；通过下拉菜单选择多个div标签

我需要能够通过下拉菜单在同一页面上隐藏/显示多个div标记，但我希望它们使用jQuery“fadeToggle”。我可以使用以下代码轻松完成此操作，而无需使用“fadeToggle”：

function generateTask() {
     document.getElementById('football').style.display = 'none'; 
     document.getElementById('football2').style.display = 'none';
}

html:

足球
板球
棒球
球
短裤

但这个解决方案并不那么优雅。任何帮助都将不胜感激

---

主要的复杂之处在于，板球可能需要div标签“football”和“football 2”，但棒球可能只需要“football 2”。

如果您可以将选项的值保留为div的ID，则会简单得多。 像这样的

加价

<select name="something" id="something"> 
     <option value="football">Football</option> 
     <option value="cricket">Cricket</option> 
     <option value="baseball">Baseball</option> 
</select>
<div id="football" class="content">Football content</div>
<div id="cricket" class="content">Cricket content</div>
<div id="baseball" class="content">Baseball content</div>

你可以试试这个

function generateTask(){ $('#football, #football2').toggle();}

或者，yan可以在应该受下拉列表影响的每个元素上添加类： 例如：

<div id="football" class="football">balls</div>
<div id="football2" class="football cricket">shorts</div>
<div id="cricket" class="cricket">stick</div>

球
短裤
粘贴

---

然后瞄准与下拉操作相关的每个元素。

Ack！内联事件处理程序！因为您已经在使用jQuery，所以确实应该去掉onclick属性并使用jQuery的方法来处理事件。

function generateTask(){ $('#football, #football2').toggle();}

<div id="football" class="football">balls</div>
<div id="football2" class="football cricket">shorts</div>
<div id="cricket" class="cricket">stick</div>