javascript - 如何根据第一个 选项填充第二个

Question

我正在尝试制作一个脚本，根据第一个 <select> 填充第二个选择选项。

例如，如果我在第一个 <select> 上选择类别 1 ，我需要在第二个中填充子类别 1.1、子类别 1.2 等。

这是我的代码:

<select id="category">
    <option value="">Select Category</option>
    <option value="1">Category 1</option>
    <option value="2">Category 2</option>
    <option value="3">Category 3</option>
</select>

<select id="subcategory">
    <option value=""></option>
</select>

我正在尝试使用 jquery 来做到这一点。有人可以帮我解决这个问题吗？

Answer 1

var categories = [
    {
       value: '1',
       name: 'Category 1',
       subCategories: [{
           value: '1.1',
           name: 'Sub 1.1'
       }, {
           value: '1.2',
           name: 'Sub 1.2'
       }]
    }, {
       value: '2',
       name: 'Category 2',
       subCategories: [{
           value: '2.1',
           name: 'Sub 2.1'
       }, {
           value: '2.2',
           name: 'Sub 2.2'
       }]
    }
];

var $categorySelect =  $("#category");
var $subCategorySelect =  $("#subcategory");

// populate categories with options
categories.forEach(function(category) {
    var $option = $('<option/>').attr('value', category.value).html(category.name);
    $categorySelect.append($option);
});

$categorySelect.on('change', function() {
    // clean subcategory select from older options
    $subCategorySelect.empty();
  
    // find selected category
    var selectedCategoryValue = $categorySelect.val();
    var category = categories.find(function(category) {
        return category.value == selectedCategoryValue;
    });
  
    // if category found - populate subcategory select
    if (category) {
        category.subCategories.forEach(function(subcategory) {
            
            // you can extract this line into separate function
            var $option = $('<option/>').attr('value', subcategory.value).html(subcategory.name);
            
            $subCategorySelect.append($option);
        });
    }
    
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="category">
    <option value="">Select Category</option>
</select>

<select id="subcategory">
    <option value=""></option>
</select>