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

Question

这是我的例子。

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

通过单击“更多”，应显示隐藏选项。选项“more”应替换为选项“less”。通过单击“较少”，选项应再次隐藏。

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

不幸的是我不知道如何开始。对此的任何帮助将不胜感激。谢谢。

更新请看看我在 js 部分的评论 http://jsfiddle.net/bqyBQ/5/

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

只需为这些元素添加一个新类，默认情况下该类应隐藏。然后向“更多”链接添加单击事件以切换这些类。用这种技术制作一个 less 按钮也很容易。