javascript隐藏/显示下拉列表中的项目

user3736748 发表于 Dev

用户名

我开始学习JavaScript，想知道是否有人知道如何在html的下拉列表中隐藏值？

例如：具有值的dropdwon列表

Select One   
Item1   
Item2    
Item3  
Item4  
Item5

我想这样隐藏项目4和5，并在单击“显示...”时显示它。

Select One  
Item1  
Item2  
Item3  
Show 2 more items (Item 4 and 5 hidden)

那可能吗？下面是我已经开始的一段代码。

var css = select;
var markers = cluster.getMarkers();
var markersLength = markers.length;

var nextOption = new Option("Select One");
css.add(nextOption, 0);

for(var i = 0; i < markersLength; i++) {

    nextOption = new Option(markers[i].title);
    try {
        css.add(nextOption, -1);
    } catch (e) {
        css.add(nextOption, null);
    }
}

去编码

您需要通用的解决方案，因此请more使用类标记选项和隐藏项。

事实证明，您无法option在select跨浏览器中始终对样式进行样式设置，因此您需要动态更改列表选项：引用此问题：如何使用CSS隐藏<select>菜单中的<option>？

最终解决方案（将元素添加到另一个隐藏的元素中`select`）：

JSFiddle：http : //jsfiddle.net/TrueBlueAussie/93D3h/12/

HTML：

Select One   
<select class="hidden">
    <option>Item4</option>
    <option>Item5</option>
    <option>Item6</option>
    <option>Item7</option>
<select>
<select>
    <option>Item1</option>
    <option>Item2</option>
    <option>Item3</option>
    <option class="more">More</option>
</select>

jQuery的：

$('select').change(function(){
    var $select = $(this);
    if ($select.val() == "More"){
    $('.more').remove();
        $select.append($('.hidden').children());
    }
});

以前的信息：

然后在select事件更改时，您隐藏more选项并显示隐藏的元素：

JSFiddle：http : //jsfiddle.net/TrueBlueAussie/93D3h/2/

$('select').change(function(){
    var $select = $(this);
    if ($select.val() == "More"){
    $('.more').hide().prevAll('.hidden').show();
    }
});

selects中似乎有一个怪异的错误，因为最后一项总是可见的（即使已样式化！）。我现在添加了一个空白条目来解决此问题。这也是为什么我没有将隐藏项放在最后一个项之后的原因（这是一个奇怪的错误-提出了一个新问题：为什么即使选择了样式，总是显示最后一个选择选项），这也是为什么。

您还将要清除选定的“更多”值，因为该值将不再存在。

例如http://jsfiddle.net/TrueBlueAussie/93D3h/3/

$('select').change(function () {
    var $select = $(this);
    if ($select.val() == "More") {
        $('.more').hide().prevAll('.hidden').show();
        $select.val('');
    }
});