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

就像在这篇文章中: Hide options in a select list using jQuery

或删除它:

JQuery: Hide options of select according to option value