如何将selectBox选中值传递给XSLT模板并实现选择变更时动态传参

XSLT 是静态转换语言，仅在生成HTML文档的阶段运行，输出到浏览器后XSLT执行上下文就会销毁，无法直接响应客户端的下拉选择事件、动态更新变量并重跑模板。你可以通过两种无AJAX的方案实现需求：

方案一：预渲染所有可选结果，切换显示（优先推荐，实现最简单、性能最优） #

适合重量选项数量不多的场景，提前用XSLT把所有重量对应的菜单信息渲染好，默认只显示选中项的内容，下拉切换时直接修改显示状态即可。

改造后的XSLT代码 #

<!-- 下拉框部分，用属性值模板简化value属性赋值 -->
<select name="weightoption" id="weightoption" onchange="switchPrice(this.value)">
    <xsl:for-each select="product-waights/entry">
        <option value="{price}">
            <xsl:value-of select="weight"/>
        </option>
    </xsl:for-each>
</select>

<!-- 预渲染所有重量对应的菜单信息容器 -->
<div id="dish-info-container">
    <xsl:for-each select="product-waights/entry">
        <!-- 每个重量对应一个容器，用price作为唯一标识，默认全部隐藏 -->
        <div class="dish-info-item" data-price="{price}" style="display:none">
            <xsl:apply-templates select="menu-dish" mode="menu_dish_information">
                <xsl:with-param name="price" select="current()/price"/>
            </xsl:apply-templates>
        </div>
    </xsl:for-each>
</div>

<!-- 内嵌JS处理切换逻辑 -->
<script type="text/javascript">
function switchPrice(selectedPrice) {
    // 隐藏所有选项内容
    document.querySelectorAll('.dish-info-item').forEach(item => {
        item.style.display = 'none'
    })
    // 显示选中价格对应的内容
    document.querySelector(`.dish-info-item[data-price="${selectedPrice}"]`).style.display = 'block'
}
// 页面初始化时默认显示第一个选项的内容
window.onload = () => {
    const firstPrice = document.getElementById('weightoption').value
    switchPrice(firstPrice)
}
</script>

方案二：客户端动态运行XSLT转换（适合选项数量较多的场景） #

如果重量选项非常多，预渲染会导致页面体积过大，可以把XSLT和XML加载到客户端，下拉切换时动态调用XSLT处理器生成对应内容。

改造后的XSLT代码 #

<!-- 下拉框部分 -->
<select name="weightoption" id="weightoption" onchange="updateDishInfo(this.value)">
    <xsl:for-each select="product-waights/entry">
        <option value="{price}">
            <xsl:value-of select="weight"/>
        </option>
    </xsl:for-each>
</select>
<!-- 空容器，用来放动态转换后的菜单信息 -->
<div id="dish-info-container"></div>

<!-- 内嵌JS处理动态转换逻辑 -->
<script type="text/javascript">
// 缓存XSLT处理器和XML源数据
let xsltProcessor = null
let xmlDoc = null

// 页面加载完成后初始化处理器
window.onload = async () => {
    // 加载XML源文件
    const xmlRes = await fetch('替换为你的XML文件实际路径')
    xmlDoc = new DOMParser().parseFromString(await xmlRes.text(), 'text/xml')
    // 加载XSLT文件
    const xsltRes = await fetch('替换为你的XSLT文件实际路径')
    const xsltDoc = new DOMParser().parseFromString(await xsltRes.text(), 'text/xml')
    // 初始化XSLT处理器
    xsltProcessor = new XSLTProcessor()
    xsltProcessor.importStylesheet(xsltDoc)
    // 初始化显示第一个选项的内容
    updateDishInfo(document.getElementById('weightoption').value)
}

function updateDishInfo(selectedPrice) {
    // 给模板传入选中的price参数
    xsltProcessor.setParameter(null, 'price', selectedPrice)
    // 运行转换，仅处理menu-dish节点
    const resultFragment = xsltProcessor.transformToFragment(xmlDoc.querySelector('menu-dish'), document)
    // 替换容器内容
    const container = document.getElementById('dish-info-container')
    container.innerHTML = ''
    container.appendChild(resultFragment)
}
</script>

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