Question

在Chrome中某些情况下拉列表项目带有滚动条，我想在下拉单击时显示所有没有滚动条的项目，在我的情况下，所有项目都在下拉列表中可用，但只有一个显示并需要滚动看到别人。

下面给出的代码。

<div class="controls">
                            <select name="teamId" id="teamIdSel" class="span2" >
                                 <?php foreach ($team_list as $team): ?>
                                    <option class="teamSelOpt" diviID="<?php echo $team->division_id; ?>" value="<?php echo $team->team_id; ?>" <?php if ($team->team_id == $teamId) { ?> selected <?php } ?> ><?php echo $team->name; ?></option>
                                <?php endforeach; ?>    
                            </select>
                        </div>

<input type="button" onclick="onChangeDivision('10', null, null)"/>

这里我使用javascript中的“diviID”动态显示和隐藏选项。

下面给出的javascript函数。

 function onChangeDivision(id, teamId, clientUserID){
    if(id){
        $('.teamSelOpt').each(function() {
            var diviId = $(this).attr("diviID");
            if(diviId == id){
                $(this).show();
            }else{
                $(this).hide();
            }
        });
}
}

当我删除“$（this）.hide（）;”来自函数的代码它将正常工作。但结果将违背我的要求。

Answer 1

您必须使用列表并将其显示在onhover / onclick上，就像Google在Google plus中一样。您无法隐藏下拉列表的滚动条。

Answer 2

通常这些选择，文件上传等是浏览器，特定于操作系统，因此我们无法按照自己的意愿设置它们。为了在选择框的所有浏览器上实现一致性，有两种方法

方法1： -

您可以使用div或ul＆amp;创建自己的弹出式内容li并将其绝对放置在所需的位置，并在点击框中显示。

方法2： -

您可以简单地使用jquery插件dropkick，您可以根据需要设置选择框的样式，并且它们在所有浏览器中看起来都相同

下拉列表带有chrome中的滚动条

2 个答案: