I have a dropdown menu on my website which is not working with Firefox Quantum but works when using Safari or Chrome. Here is a link to the page, it is the "select a size for your print" which is not working: https://www.alaincombemorel.com/prints-for-sale/tre-cime-di-lavaredo-2/ Is it related to some coding errors on my side or is it some settings within firefox that prevent the menu from working?
I have tried to whitelist the website within Firefox parameters (popup, cookies, etc..) not to prevail
jQuery(document).ready(function() {
jQuery("select").change(function() {
var selected = jQuery(this).find('option:selected');
jQuery('#foo').html(selected.data('foo'));
}).change();
jQuery("select").change(function() {
if (jQuery(this).val() == '1') {
jQuery('#small').show();
jQuery('#medium').hide();
jQuery('#large').hide();
} else if (jQuery(this).val() == '2') {
jQuery('#small').hide();
jQuery('#medium').show();
jQuery('#large').hide();
} else if (jQuery(this).val() == '3') {
jQuery('#small').hide();
jQuery('#medium').hide();
jQuery('#large').show();
} else {
jQuery('#small').hide();
jQuery('#medium').hide();
jQuery('#large').hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Here is the code I am using:
<div class="print-order">
<table class="print-select">
<tr>
<td>
<h6>Select a size for your print:</h6>
</td>
<td>
<select id="select">
<option value="0" data-foo="">Select:</option>
<option value="1" data-foo=" price: 100€ ">24x30cm</option>
<option value="2" data-foo=" price: 150€ ">30x40cm</option>
<option value="3" data-foo=" price: 200€ ">40x50cm</option>
</select>
</td>
</tr>
</table>
</div>
<!-- print order -->