javascript - 下拉列表问题

Question

我遇到了一个问题，即 IE 6/7 中的下拉列表的行为如下：

替代文字

您可以看到下拉列表width不够宽，无法在不展开整体下拉列表的情况下显示整个文本。

但是在 Firefox 中，没有问题，因为它expands the width相应地。这是我们在 IE 6/7 中想要的行为：

替代文字

我们已经研究了利用onfocus, onblur, onchange, keyboard and mouse events来尝试解决问题的各种方法，但仍然存在一些问题。

我想知道是否有人在不使用任何工具包/框架（YUI、Ext-JS、jQuery 等）的情况下在 IE 6/7 中解决了这个问题。

score 4 · Accepted Answer

这个人和你有同样的问题，他想出了一个解决方案。这有点小技巧，取决于您的 UI 设置方式，但它是一种选择。我希望它有所帮助。

编辑

我开始寻找的链接实际上是这个，这与蒂姆建议的相同。我认为这是一个比我原来的发现更好的解决方案。第二次编辑这个解决方案实际上依赖于 YUI 框架，但我不认为复制它背后的主要思想太难了。否则，第一个链接也可以，而且要简单得多。

祝你好运。

score 2 · Accepted Answer

在您的情况下，这样的事情是否可行？

http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/demo.php

鼠标悬停期间下拉菜单的宽度会增大/缩小。

score 2 · Accepted Answer

<script type="text/javascript">
    var MAX_WIDTH = 500; //the biggest width the select is allowed to be

    function biggestOption(elem) {
        var biggest = 0;
        for (var i=0;i<elem.options.length;i++) {
            if ( elem.options[i].innerHTML.length > biggest ) {
                biggest = elem.options[i].innerHTML.length;
            }
        }
        return roughPixelSize(biggest);
    }

    function roughPixelSize(charLength) {
        //this is far from perfect charLength to pixel
        //but it works for proof of concept
        roughSize =  30 + (charLength * 6);
        if (roughSize > MAX_WIDTH) {
            return MAX_WIDTH;
        } else {
            return roughSize;
        }
    }

    function resizeToBiggest(elem) {
        elem.style.width = biggestOption(elem);
    }

    function resizeToSelected(elem) {
        elem.style.width = roughPixelSize(elem.options[elem.selectedIndex].innerHTML.length);
    }

</script>

<select onmouseover="resizeToBiggest(this)" style="width:70px" onchange="resizeToSelected(this)" onblur="resizeToSelected(this)" >
    <option>test 1</option>
    <option>test 2</option>
    <option>test 3</option>
    <option>this is some really really realy long text</option>
    <option>test 4</option>
    <option>test 5</option>
</select>

如果没有大量工作或使用框架，我认为您想做的事情是不可能的。以上是您可以考虑尝试/弄乱的东西...

score 0 · Accepted Answer

我建议扩大选择范围。Firefox对此很友好，并扩大了选项的宽度，以便您可以看到它的值，但这并不能解决一旦您选择了一个选项，您将无法看到您选择的确切内容的问题一个用户，除非您使选择范围更广。因此，从用户友好的角度来看，我建议只允许浏览器根据其内容调整选择的大小，或者设置一个足够宽的宽度以容纳最宽选项内容的值。

score 0 · Accepted Answer

我认为，如果您将控件上的宽度留空，它将调整为控件中的数据。

[编辑] 是的，在 vs2005 网络应用程序中对其进行了测试。添加控件并将项目放入。它调整为 ie 7.0 中最长的项目当我规定宽度时它不再这样做。

[编辑 2] 唯一的问题是下拉菜单的文本框也会调整。这可能会影响您的 UI。所以这可能不是您正在寻找的解决方案。

[编辑 3] 这绝对是他们渲染的不同方式。我认为您可以克服此问题的唯一方法是创建类似于此处建议的控件

score 0 · Accepted Answer

问题是我们不希望它自动调整大小，让我们将问题隔离到这个特定问题。虽然我同意从可用性的角度来看它并不理想，但我仍然想解决这个问题。

我们有一个固定宽度的下拉列表，我们希望它在 FireFox 7 中的行为如上所示。

score 0 · Accepted Answer

我在 IE7 上对此进行了测试，并相应地进行了扩展。你确定你没有使用某种奇怪的 CSS 迫使它只在 IE 6/7 中达到那个大小吗？（可以使用奇怪的 CSS 选择器黑客攻击特定的浏览器，例如 '* html'）

score 0 · Accepted Answer

基本上，如果您确实需要一个 ACTUAL 文本框，您将需要选择一个或另一个（定义或不定义宽度）。这是为所有已知的浏览器编写代码时遇到困难的一个典型例子，除非公司聚在一起说“这就是它的方式。永远”，否则真的没有办法解决这个问题。

作为替代方案，您可以使用另一个答复中提到的本土解决方案。在你的情况下，我会推荐它。

score -2 · Accepted Answer

你如何填充 DropDownList。我正在使用以下代码填充 DropDownList 并根据显示的最大文本调整宽度：

private void BindData()
        {
            List<Foo> list = new List<Foo>();
            list.Add(new Foo("Hello"));
            list.Add(new Foo("bye bye"));
            list.Add(new Foo("this is a reall asd a s das d asd as da sf gfa sda sd asdasd a"));

            ddl1.DataSource = list;
            ddl1.DataTextField = "Text"; 
            ddl1.DataBind(); 
        }

哦，是的，不要在 DropDownList 上明确定义宽度。

javascript - 下拉列表问题

9 回答 9

Related

Reference