使用 JavaScript 和 jQuery 创建级联下拉列表 [关闭]答案

【问题标题】：create a cascading dropdown list with JavaScript and jQuery [closed]使用 JavaScript 和 jQuery 创建级联下拉列表 [关闭]
【发布时间】：2021-12-06 22:41:06
【问题描述】：

您好，我有此代码，但我不知道为什么不工作会给我一个显示，但如果我更改第一个下拉列表，请不要将下拉列表更改为第二个列表。

我正在使用这个 HTML 应用内脚本。

这是我使用 HTML 和 jQuery 的代码：

    <!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-3.5.1.min.js">  
    $(document).ready(function(){
    var $cat = $('select[name=category]'),
        $items = $('select[name=items]');

    $cat.change(function(){
        var $this = $(this).find(':selected'),
            rel = $this.attr('rel'),
            $set = $items.find('option.' + rel);
        
        if ($set.size() < 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>

我从以下来源获得该代码： https://jsfiddle.net/userdude/bY5LF/

【问题讨论】：

标签： javascript html jquery google-apps-script

【解决方案1】：

这按要求工作，我已经评论了代码中的更改，因此它应该是自我解释的。我已经隐藏了所有选项，然后在第一个下拉菜单中显示了与选择匹配的选项。

演示

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

【讨论】：

谢谢，我编辑了那个代码，现在可以从谷歌<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>添加库了