1

这是我的例子。

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

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

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

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

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

4

2 回答 2

0

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

于 2012-08-23T13:22:20.697 回答
0

我会尝试这样的事情

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

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

于 2012-08-23T13:33:51.890 回答