0

在 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();” 函数中的代码可以正常工作。但结果将违反我的要求。

4

2 回答 2

0

您将不得不改用列表并在悬停/点击时显示它，就像 Google 在 Google plus 中所做的那样。您不能隐藏下拉菜单的滚动条。

于 2012-07-20T11:06:09.860 回答
0

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

方法1：-

您可以使用 divs 或 ul & li 创建自己的弹出类型的东西，并将其绝对定位在所需的位置，并在单击框时显示它。

方法2：-

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

于 2012-07-20T11:48:07.093 回答