使用JavaScript与jQuery实现级联下拉列表时子菜单不联动如何解决

错误原因 #

• script标签结构错误：同时在<script>标签上设置src属性引入jQuery、又在标签内部写自定义逻辑，浏览器会直接忽略标签内的代码，必须拆分两个独立的script标签。
• API使用错误：jQuery 3.x已废弃size()方法，需替换为.length属性；原判断逻辑$set.size() < 0不成立，元素数量最小值为0，应改为判断长度是否为0。
• 边界情况未处理：第一个下拉选「None」选项时没有rel属性，会导致类名选择器匹配异常，需加判断过滤该情况。

修复后完整代码 #

<!DOCTYPE html>
<html>
<head>
<!-- 单独引入jQuery的script标签 -->
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
<!-- 单独写自定义逻辑的script标签 -->
<script type="text/javascript">
$(document).ready(function(){
    var $cat = $('select[name=category]'),
        $items = $('select[name=items]');
    // 初始隐藏第二个下拉
    $items.hide();

    $cat.change(function(){
        var $this = $(this).find(':selected'),
            rel = $this.attr('rel');
        // 选None没有rel的情况直接隐藏第二个下拉
        if(!rel){
            $items.hide();
            return;
        }
        var $set = $items.find('option.' + rel);
        if ($set.length === 0) {
            $items.hide();
            return;
        }
        $items.show().find('option').hide();
        $set.show().first().prop('selected', true);
    });
});
</script> 
</head>   
<body>
<h1>Cascading Dropdown Example</h1>
<select name="category">
    <option value="0">None</option>
    <option value="1" rel="accessories">Cellphones</option>
    <option value="2" rel="sports">Sports</option>
    <option value="3" rel="cars">Cars</option>
</select>
<select name="items" class="cascade">
    <option value="3" class="accessories">Smartphone</option>
    <option value="8" class="accessories">Charger</option>
    <option value="1" class="sports">Basketball</option>
    <option value="4" class="sports">Volleyball</option>
    <option value="6" class="cars">Corvette</option>
    <option value="2" class="cars">Monte Carloe</option>
</select>
</body>
</html>

补充说明 #

如果部分浏览器出现option隐藏不生效的情况，可以修改显隐逻辑：先将所有option缓存到变量中，切换时清空第二个下拉，再把匹配的option插入进去，兼容性更好。

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