jQuery select option hide not working on mobile

Question

My cascading dropdown works fine, exactly how I want it to on a desktop device, however on mobile, the second option of the dropdown lets me choose any option, even those only meant for a different first dropdown input. Is there any way to fix this? I included a picture of what I am talking about and a link to my code.

html

js

$('#dropdown1').change(function() {

$('#imgList').css('display','block');

});

$(document).ready(function(){
var $cat = $('select[name=category]'),
$category = $('select[name=items]');

$cat.change(function(){
    
    var $this = $(this).find(':selected'),
    rel = $this.attr('rel');
            
    // Hide all
    $category.find("option").hide();
      
    // Find all matching accessories
    // Show all the correct accesories
    // Select the first accesory
    $set = $category.find('option.' + rel);
    $set.show().first().prop('selected', true);
    
    });
});

        function setClass() {
            var img = document.getElementById("image");
            img.src = this.value;
            return false;
        }
        document.getElementById("imgList").onchange = setClass;

https://jsfiddle.net/7t5rLa3h/

BehRouz · Answer

Looks like hiding the option (display:none) on mobile browsers doesn't work. But you can disable and enable them like options.attr('disable', true).

Alternatively, you can save a set of options in a variable and filter and re-populate the select later.

$(document).ready(function() {
    var $cat = $('select[name=category]'),
        $category = $('select[name=items]'),
        $options = $('select[name=items] option');
    
    $cat.change(function() {
        var $this = $(this).find(':selected'),
            rel = $this.attr('rel'),
            $set = $options.filter('[data-category=' + rel + ']');
        $category.html($set)
        $set.show().first().prop('selected', true);
    });
});

$('#dropdown1').change(function() {
    $('#imgList').css('display', 'block');
});


Choose Model and Timeframe

jQuery select option hide not working on mobile

1 Answers