javascript - 如何隐藏和显示选择选项

Question

我对 jQuery 非常陌生。在我问之前，我用谷歌搜索了很多，虽然它看起来很傻，但对我来说它很复杂。

我有一个简单的<select>列表，其中包含大约 4 个值，如下图所示。

现在在运行时，我想隐藏选项并根据 jQuery 中的索引或值名称显示。我怎样才能做到这一点？

我的下拉框有一个div区域和select带有一组值的简单选项。请给我一个简单的例子。

示例代码

<Div ID = "abcd">
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
</div>

在此如何在运行时隐藏沃尔沃/欧宝？...就像我想动态显示和隐藏这些选项一样。

例如：按下按钮时，我想隐藏沃尔沃。同样，如果按下另一个按钮，我想显示沃尔沃回来。

Answer 1

如果您想隐藏整个选择，您应该为您的选择或包含您选择的 div 提供一个 id，然后您可以这样做：

<div id="mySelect" >your select tag here </div>

$('mySelect').show(); // or $('mySelect').hide();

http://api.jquery.com/hide/

http://api.jquery.com/show/

如果您想隐藏该选项，您可以执行以下操作：

$("#edit-field-service-sub-cat-value option[value=" + title + "]").hide();

要更具体到您的代码：

<div id="abcd">
<select id="mySelect">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
</div>

title = 'volvo';
$("#mySelect option[value=" + title + "]").hide();

就像在这篇文章中一样： 使用 jQuery 在选择列表中隐藏选项

或删除它：

JQuery：根据选项值隐藏选择的选项