Выпадающий список не отображается в Firefox

У меня есть выпадающий список с параметрами, не видимыми в firefox, но visble в 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>

может кто-нибудь, пожалуйста, помогите мне с этой проблемой.

6
browser css firefox html

3 ответов

Это похоже на ошибку в firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=40545#c11)

Я предполагаю, что вы пытались добавить метку в качестве содержимого элемента option?

<!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>
6

вы должны записать значение в 

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

Это старая нерешенная проблема в Firefox, но предполагая, что вы можете использовать jQuery, разделяя быстрый обходной путь, который сделал эту работу для меня. Несколько элементов select, таких как приведенный ниже, были использованы на моей странице 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).готовый.)(

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

он в основном устанавливает внутренний текст опции на значение, указанное атрибутом label. Вы можете изменить селектор jQuery, чтобы сделать его более конкретным, если требуемый.

таким образом, вам не нужно менять теги данных на стороне сервера. Протестировали это в Firefox 40.0.3.

0