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

这是我的示例。隐藏选择选项并在点击定义的选项后显示它们

<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个选项。对某种阵列有用吗？

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

UPDATE 请看看我的JS-部分http://jsfiddle.net/bqyBQ/5/

来源

2012-08-23 user1437032

我相信要“隐藏”选项元素，您需要实际删除它们，因为某些浏览器不允许您通过CSS隐藏它们。 – nnnnnn

嗯，所以没有办法再次显示他们？ – user1437032

选择元素可能没有那么灵活，您可能需要考虑一个复选框列表并添加一些js和css，以允许简单的选择和可视指示选择什么 – hsalama

我会尝试这样的事情

<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-23 13:33:51 apparat

评论请在“更多”选项的链接。更多选项点击应该调用JavaScript或jQuery和从脚本动态添加数据和切换多与少，以及添加和删除操作的标题

来源

2012-08-23 13:22:20 Aravind

我是javascript的新手。你有没有例子？ – user1437032

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

回答

相关问题