All geek questions in one place

Dropdown list not showing in Firefox

I have a drop-down list with options that are not visible in firefox but look like in IE and Chrome. I have added the code snippet below.

<!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>
Run codeHide result

Can anybody help me on this.

+4
source share
3 answers

This seems to be a bug in firefox. ( https://bugzilla.mozilla.org/show_bug.cgi?id=40545#c11 )

I assume you tried to add a label as the content of the option element?

<!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>
Run codeHide result
+4
source

You need to write the value in

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

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>

Now just call the method below from jQuery (document) .ready ().

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

Basically, it sets the inner text of the parameter to the value indicated by the label attribute. You can change the jQuery selector to make it more specific if required.

Thus, you do not need to change the data tags on the server side. Check it out in Firefox 40.0.3.

0
source

Source: https://habr.com/ru/post/1570135/

More articles:


All Articles