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-Part http://jsfiddle.net/bqyBQ/5/

中的评论

Answer 1

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

Answer 2

我会尝试这样的事情

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

只需为这些元素添加一个新类，默认情况下应隐藏这些元素。然后将click事件添加到更多链接以切换这些类。用这种技术制作一个较少的按钮也很容易。

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

2 个答案: