能否仅用XSLT实现级联下拉菜单且无需一次性加载全部数据？

核心结论 #

首先明确：纯XSLT无法实现动态级联下拉菜单。
原因是XSLT属于预处理转换工具，仅在XML转HTML的渲染阶段执行，页面加载完成后XSLT生命周期就结束了，无法响应页面上的onChange等交互事件，动态交互必须依赖JS实现。

可选优化方案（适配仅XML数据源的限制） #

你当前的预加载全量数据+JS过滤的方案已经是符合限制的最优实现，我们可以在这个基础上优化性能，避免初始渲染大量无用的option节点：

优化思路 #

让XSLT在转换阶段直接把XML里的级联数据导出为JS可直接读取的JSON结构，不需要提前把所有车型、款型的option都渲染到DOM里，onChange触发时再根据选中值从JSON中提取对应数据生成option即可，减少初始DOM体积。

优化后XSLT代码示例 #

<div style="height:auto; width:100%; background-color:azure; position:absolute;" class="prototype-menu">
    <select style="min-width: 220px;" id="first-select">
        <option value="">-</option>
        <xsl:for-each select="navigation/item">
            <xsl:if test="item">
                <option value="{@id}"><xsl:value-of select="@name"/></option>
            </xsl:if>
        </xsl:for-each>
    </select>
    <select style="min-width: 220px;" id="second-select" disabled>
        <option value="">-</option>
    </select>
    <select style="min-width: 220px;" id="third-select" disabled>
        <option value="">-</option>
    </select>
    <a style="margin-left: 30px; background: red;" id="search-submit">Search</a>
</div>
<script>
// XSLT直接导出全量级联数据为JSON
const cascadeData = [
    <xsl:for-each select="navigation/item">
    <xsl:if test="item">
    {
        id: "<xsl:value-of select="@id"/>",
        name: "<xsl:value-of select="@name"/>",
        models: [
            <xsl:for-each select="item">
            <xsl:if test="item">
            {
                id: "<xsl:value-of select="@ni"/>",
                name: "<xsl:value-of select="@name"/>",
                types: [
                    <xsl:for-each select="item">
                    {
                        id: "<xsl:value-of select="@ni"/>",
                        name: "<xsl:value-of select="@name"/>",
                        link: "<xsl:value-of select="@link"/>"
                    }<xsl:if test="position() != last()">,</xsl:if>
                    </xsl:for-each>
                ]
            }<xsl:if test="position() != last()">,</xsl:if>
            </xsl:if>
            </xsl:for-each>
        ]
    }<xsl:if test="position() != last()">,</xsl:if>
    </xsl:if>
    </xsl:for-each>
];
</script>

优化后JS代码示例 #

// 缓存DOM节点
const $madeSelect = $("#first-select");
const $modelSelect = $("#second-select");
const $typeSelect = $("#third-select");
const $submitBtn = $("#search-submit");

// 品牌切换事件
$madeSelect.change(function() {
    const madeId = $(this).val();
    // 重置下级菜单
    $modelSelect.html('<option value="">-</option>').prop("disabled", !madeId);
    $typeSelect.html('<option value="">-</option>').prop("disabled", true);
    $submitBtn.removeAttr("href");
    
    if (!madeId) return;
    // 从预加载的JSON中找到对应品牌的车型
    const made = cascadeData.find(item => item.id === madeId);
    made.models.forEach(model => {
        $modelSelect.append(`<option value="${model.id}">${model.name}</option>`);
    });
});

// 车型切换事件
$modelSelect.change(function() {
    const madeId = $madeSelect.val();
    const modelId = $(this).val();
    // 重置下级菜单
    $typeSelect.html('<option value="">-</option>').prop("disabled", !modelId);
    $submitBtn.removeAttr("href");
    
    if (!modelId) return;
    // 从预加载的JSON中找到对应车型的款型
    const made = cascadeData.find(item => item.id === madeId);
    const model = made.models.find(item => item.id === modelId);
    model.types.forEach(type => {
        $typeSelect.append(`<option value="${type.link}">${type.name}</option>`);
    });
});

// 款型切换事件
$typeSelect.change(function() {
    const link = $(this).val();
    link ? $submitBtn.attr("href", link) : $submitBtn.removeAttr("href");
});

关于按需加载的说明 #

如果要实现onChange后才加载对应数据，在没有后端接口的前提下无法做到真正的按需加载，只能是上述预加载全量数据到内存，交互时再生成DOM的方案，和你当前的实现逻辑本质一致，但性能更优。

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