如何实现dx-selectBox联动？选择第一个后其余显示子分类

我有3个dx-selectBox组件，需要实现联动功能：选择第一个selectBox时，其余selectBox显示对应的子分类。我知道可以通过onValueChanged事件实现，但JavaScript基础薄弱，尝试后没成功。之前用普通HTML的select标签时，能通过value实现联动，但不知道怎么用dx-selectBox完成。

核心实现思路 #

利用dxSelectBox的onValueChanged事件监听第一个选择器的变化，动态给后续选择器的数据源添加过滤条件，同时控制下级选择器的启用/禁用状态，实现层级联动。

完整代码示例 #

1. HTML结构（添加三个联动选择器容器）

<div class="dx-field">
    <h3>分类</h3>
    <div class="dx-field-value">
        <div id="categoryBox"></div>
    </div>
</div>
<div class="dx-field">
    <h3>品牌</h3>
    <div class="dx-field-value">
        <div id="brandBox"></div>
    </div>
</div>
<div class="dx-field">
    <h3>产品</h3>
    <div class="dx-field-value">
        <div id="productBox"></div>
    </div>
</div>

2. JavaScript逻辑（实现联动）

$(() => {
    // 分类数据源
    const categories = [
        { Name: 'Marka', ID: 'Marka' },
        { Name: 'Televisions', ID: 'Televisions' }
    ];

    // 初始化第一个选择器：分类选择
    const categoryBox = $('#categoryBox').dxSelectBox({
        dataSource: categories,
        displayExpr: 'Name',
        valueExpr: 'ID',
        placeholder: '请选择分类',
        onValueChanged(e) {
            const selectedCategory = e.value;
            // 过滤品牌数据源，只显示当前分类下的品牌
            brandBoxDataSource.filter(['Category', '=', selectedCategory]);
            brandBoxDataSource.load();
            // 重置品牌和产品的选中值
            brandBox.option('value', null);
            productBox.option('value', null);
            // 重置产品数据源过滤条件
            productBoxDataSource.filter([]);
            productBoxDataSource.load();
            // 控制品牌选择器的启用状态
            brandBox.option('disabled', !selectedCategory);
            productBox.option('disabled', true);
        }
    }).dxSelectBox('instance');

    // 品牌数据源：基于产品数据，按分类过滤并去重
    const brandBoxDataSource = new DevExpress.data.DataSource({
        store: {
            data: products,
            type: 'array',
            key: 'ID'
        },
        select: ['Name', 'ID', 'Category'],
        distinct: true // 去重，避免同一品牌重复显示
    });

    // 初始化第二个选择器：品牌选择
    const brandBox = $('#brandBox').dxSelectBox({
        dataSource: brandBoxDataSource,
        displayExpr: 'Name',
        valueExpr: 'ID',
        placeholder: '请先选择分类',
        disabled: true,
        onValueChanged(e) {
            const selectedBrandId = e.value;
            // 过滤产品数据源，只显示当前品牌的产品
            productBoxDataSource.filter(['ID', '=', selectedBrandId]);
            productBoxDataSource.load();
            // 重置产品选中值
            productBox.option('value', null);
            // 控制产品选择器的启用状态
            productBox.option('disabled', !selectedBrandId);
        }
    }).dxSelectBox('instance');

    // 产品数据源
    const productBoxDataSource = new DevExpress.data.DataSource({
        store: {
            data: products,
            type: 'array',
            key: 'ID'
        }
    });

    // 初始化第三个选择器：产品选择
    const productBox = $('#productBox').dxSelectBox({
        dataSource: productBoxDataSource,
        displayExpr: 'Name',
        valueExpr: 'ID',
        placeholder: '请先选择品牌',
        disabled: true
    }).dxSelectBox('instance');
});

// 你的产品数据（保持不变）
const products = [{
    ID: 1,
    Name: 'Alfa Romeo',
    Price: 330,
    Current_Inventory: 225,
    Backorder: 0,
    Manufacturing: 10,
    Category: 'Marka',
    ImageSrc: 'images/products/1.png'
}, {
    ID: 2,
    Name: 'Aston Martin',
    Price: 400,
    Current_Inventory: 150,
    Backorder: 0,
    Manufacturing: 25,
    Category: 'Marka',
    ImageSrc: 'images/products/2.png',
}, {
    ID: 3,
    Name: 'Audi',
    Price: 2400,
    Current_Inventory: 0,
    Backorder: 0,
    Manufacturing: 0,
    Category: 'Marka',
    ImageSrc: 'images/products/3.png',
}, {
    ID: 4,
    Name: 'Bentley',
    Price: 1600,
    Current_Inventory: 77,
    Backorder: 0,
    Manufacturing: 55,
    Category: 'Televisions',
    ImageSrc: 'images/products/4.png',
}, {
    ID: 5,
    Name: 'BMW',
    Price: 1450,
    Current_Inventory: 445,
    Backorder: 0,
    Manufacturing: 0,
    Category: 'Televisions',
    ImageSrc: 'images/products/5.png',
}, {
    ID: 6,
    Name: 'Cadillac',
    Price: 1350,
    Current_Inventory: 345,
    Backorder: 0,
    Manufacturing: 5,
    Category: 'Televisions',
    ImageSrc: 'images/products/6.png',
}];

关键细节说明 #

• 数据源过滤：通过DataSource.filter()方法设置过滤规则，调用load()重新加载数据，实现下级选项的动态更新。
• 状态控制：用disabled属性控制下级选择器的可用性，未选择上级选项时，下级选择器处于禁用状态。
• 值重置：上级选项变化时，重置下级选择器的选中值，避免出现不匹配的无效数据。
• 品牌去重：品牌数据源使用distinct: true配置，确保同一品牌只显示一次。

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