jQuery级联下拉select option移动端隐藏失效问题修复求助

问题说明 #

实现的级联下拉菜单在桌面端运行正常，但移动端中第二个下拉菜单允许选择所有选项，包括仅适配第一个下拉菜单其他选项的内容。

原代码 #

HTML #

<select name="category" id='dropdown1'>
    <option value="0" rel='start'>Select Model</option>
    <option value="1" rel="GFS">GFS</option>
    <option value="2" rel="NAM">NAM</option>
</select>
<select name="items" class="cascade", id="imgList" style='display:none'>
    <option value="" class='NAM'>Please select a timeframe</option>
    <option value="" class='GFS'>Please select a timeframe</option>
    <option value='.png' class="GFS">1-Day</option>
    <option value='.png' class="GFS">5-Days</option>
    <option value='.png' class="NAM">1-Day</option>
</select>

JavaScript #

$('#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;

问题根源 #

移动端原生select控件不支持通过display: none隐藏option元素，即使通过jQuery的hide()方法设置了隐藏，移动端依然会渲染所有选项，导致用户可以选择不属于当前分类的内容。

修复方案 #

方案一：禁用无关选项（推荐） #

通过禁用不符合当前分类的选项，让移动端原生select灰化这些选项，用户无法选择。

修改后的JavaScript代码：

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

$(document).ready(function(){
    var $cat = $('select[name=category]'),
        $category = $('select[name=items]');
    
    // 提前保存所有option的副本，避免重复操作DOM
    var allOptions = $category.find('option').clone();
    
    $cat.change(function(){
        var $this = $(this).find(':selected'),
            rel = $this.attr('rel');
        
        // 重置下拉菜单，重新添加所有选项
        $category.empty().append(allOptions.clone());
        
        // 禁用不属于当前分类的选项
        $category.find('option').not('.' + rel).prop('disabled', true);
        
        // 选中当前分类的第一个选项
        $category.find('option.' + rel).first().prop('selected', true);
    });
});        

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

方案二：动态重构选项列表 #

直接移除无关选项，只保留当前分类的内容，移动端只会显示符合条件的选项。

修改后的JavaScript代码：

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

$(document).ready(function(){
    var $cat = $('select[name=category]'),
        $category = $('select[name=items]');
    
    // 提前保存所有option的副本
    var allOptions = $category.find('option').clone();
    
    $cat.change(function(){
        var $this = $(this).find(':selected'),
            rel = $this.attr('rel');
        
        // 清空下拉菜单，只添加当前分类的选项
        $category.empty().append(allOptions.filter('.' + rel));
        
        // 选中第一个选项
        $category.find('option').first().prop('selected', true);
    });
});        

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

内容的提问来源于stack exchange，提问作者Wx_Trader