Question

我有一个下拉列表，其中的选项在Firefox中不可见，但在IE和Chrome中都是可见的。我在下面添加了代码段。

<!DOCTYPE html>
<html>
<head>
<title>Mozilla Test</title>
</head>
<body>
<select id="product" name="product"  title="Product" tabindex="14" style="padding-top:1px!important;padding-bottom:1px!important;width:100px;>
		<option value="selectFruit" label="--Select--"></option>
		<option value="APP" label="Apple"></option>
		<option value="BAN" label="Banana"></option>
		<option value="GRA" label="Grapes"></option>
</select>
</body>
</html>

任何人都可以帮我解决这个问题。

Answer 1

这似乎是firefox中的一个错误。（https://bugzilla.mozilla.org/show_bug.cgi?id=40545#c11）

我假设您已尝试添加标签作为选项元素的内容？

<!DOCTYPE html>
<html>
<head>
<title>Mozilla Test</title>
</head>
<body>
<select id="product" name="product"  title="Product" tabindex="14" style="padding-top:1px!important;padding-bottom:1px!important;width:100px;>
		<option value="selectFruit" label="--Select--"></option>
		<option value="APP" label="Apple">Apple</option>
		<option value="BAN" label="Banana">Banana</option>
		<option value="GRA" label="Grapes">Grapes</option>
</select>
</body>
</html>

Answer 2

您必须在

中写入值

<option value="APP" label="Apple">Apple</option>

Answer 3

这是Firefox中一个尚未解决的问题，但假设你可以使用jQuery，分享一个为我完成工作的快速解决方法。在我的aspx页面中使用了多个选择元素，如下面给出的元素 -

<select id="cbType" runat="server" class="form-control"
    title="<%$ Resources: Something %>">
    <option value="0" selected="selected" label="<%$ Resources: Option1 %>" runat="server"></option>
    <option value="1" label="<%$ Resources: Option2 %>" runat="server"></option>
    <option value="2" label="<%$ Resources: Option3 %>" runat="server"></option>
    <option value="3" label="<%$ Resources: Option4 %>" runat="server"></option>
    <option value="4" label="<%$ Resources: Option5 %>" runat="server"></option>
</select>

现在只需从jQuery（document）.ready（）调用下面的方法。

function fixFirefoxDropdownIssue() {
    jQuery('select option').each(function() {
        jQuery(this).text(jQuery(this).attr('label'));
    });
}

它基本上将option的内部文本设置为label属性指定的值。如果需要，您可以更改jQuery选择器以使其更具体。

这样，您不必更改任何服务器端数据标记。在Firefox 40.0.3中测试了这个。

下拉列表在Firefox中不可见

3 个答案: