如何隐藏和显示选择框中的选项

Question

我对jQuery非常非常新。虽然看起来很傻，但对我来说很复杂，我在提问之前进行了大量谷歌搜索。

我有一个简单的列表，像下面的图片一样有大约4个值。 现在在运行时，我想在jQuery中隐藏选项并根据索引或值名称显示选项。我该如何实现？ 我的下拉框有一个区域和一个简单的选项以及一组值。请给我一个简单的例子。

示例代码：

<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>

如何在运行时隐藏Volvo/Opel？例如，我想动态地显示和隐藏这些选项。

例如：当按下按钮时，我想隐藏Volvo。同样，如果按下另一个按钮，则想要再次显示Volvo。

- Naruto

---

你参加过任何教程吗？http://www.whathaveyoutried.com - Jay Blanchard

你能举个例子说明选项所基于的索引或名称吗？ - Samsquanch

@Samsquanch，我已经更新了问题...请帮忙。 - Naruto

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：根据选项值隐藏选择列表的选项

- Mehdi Karamosly

---

谢谢。在这种情况下，edit-field-service-sub-cat-value是我的DIV ID，tittle是值，例如Volvo、Opel等。正确吗？ - Naruto

是的，那只是一个来自StackOverflow的例子，你只需要用你的ID替换它即可。 - Mehdi Karamosly

请注意，如果当前选择了元素（在某些浏览器中），隐藏该元素仍会显示其作为当前索引的值（以及selectedIndex属性），但该值（选项）不再可见以供选择。这可能会在未来造成问题。我更倾向于将元素从列表中“分离”和“附加”到列表中。 - rlemon

@MehdiKaramosly，我尝试了这样写：var title = "Volvo"; $(Bus + "-Names" + "option[value=" + title + "]").hide();。但是没有起作用 :( - Naruto

在选择器中，应该在id和选项之间加上空格，就像这样：var title = "Volvo"; $(Bus + "-Names" + " option[value=" + title + "]").hide();如果可以的话，请告诉我。 - Mehdi Karamosly