隐藏选择选项并在单击定义的选项后显示它们答案

【问题标题】：hiding select options and show them after clicking a defined one隐藏选择选项并在单击定义的选项后显示它们
【发布时间】：2012-08-23 13:16:34
【问题描述】：

这是我的例子。

<select name="mydropdownbox">
<option value="val1">val1</option>
<option value="val2">val2</option>
<option value="val3">val3</option>
<option value="val4">val4</option>
<option value="val5">val5</option>
<option value="val6">val6</option>
</select>

如您所见，我们有一个包含不同选项的选择框。我想要做的是使用 val2 和 val5 隐藏选项，但在列表末尾添加另一个选项，如 <option value="more">more</option>。

点击“更多”应该会显示隐藏的选项。 “更多”选项应替换为“更少”选项。通过单击 less 选项应再次隐藏。

请记住，这只是一个示例。完整列表包含 50 多个选项。对某种数组有用吗？

很遗憾，我不知道如何开始。对此的任何帮助将不胜感激。谢谢。

更新请在 js-Part 中查看我的 cmets http://jsfiddle.net/bqyBQ/5/

【问题讨论】：

我相信要“隐藏”选项元素，您需要实际删除它们，因为某些浏览器不允许您通过 CSS 隐藏它们。
嗯，这样就没有办法再给他们展示了吗？
选择元素可能对您的要求不太灵活，您可能需要考虑一个复选框列表并添加一些 js 和 css 以便轻松选择并直观地指示所选内容
我愿意，但该列表是国家/地区列表，我从服务器获取数据。
要再次显示它们，您将它们附加回来。如果您使用的是 jQuery，您可以使用 .detach() method 删除它们并保留对它们的引用，以便以后重新附加。

标签： javascript jquery select options

【解决方案1】：

我会尝试这样的事情

<select id="mydropdownbox" name="mydropdownbox">
    <option value="val1">val1</option>
    <option value="val2">val2</option>
    <option value="val3">val3</option>
    <option value="val4" class="hide">val4</option>
    <option value="val5" class="hide">val5</option>
    <option value="val6" class="hide">val6</option>
    <option value="more" class="more">more</option>
</select>

<style type="text/css">
  .hide { display: none; }
</style>

<script type="text/javascript">
  jQuery('#mydropdownbox .more').click(function() { 
    jQuery('#mydropdownbox .hide').attr('class', 'show');
  });
</script>

只需为这些元素添加一个新类，默认情况下应该隐藏。然后将点击事件添加到更多链接以切换这些类。使用这种技术也可以轻松制作更少的按钮。

【讨论】：

【解决方案2】：

在“更多”选项中创建链接。单击更多选项应调用 javascript 或 jquery 并从脚本中动态添加数据并切换更多和更少的标题以及添加和删除操作

【讨论】：

我是 JavaScript 新手。你有例子吗？