ColdFusion实现可搜索联动下拉框并保留option值的方案咨询

失效原因 #

Selectize初始化后会隐藏原生的<select>元素，自行渲染DOM结构实现搜索功能。原有代码直接修改原生select的option属性，不会同步到Selectize实例内部的选项列表，所以联动看起来失效了。

优化方案 #

原有CF嵌套查询生成JS的写法冗余，我们先预生成分类-子分类映射数据，再通过Selectize提供的API操作子分类选项，实现更简洁的联动逻辑。

完整修改后的代码 #

1. CF数据查询与JS映射生成

<!-- 一次性查询所有分类和子分类 避免嵌套查询 -->
<cfquery name="catlist" datasource="ds_source">
    select ecatid, catname from ecat order by catname
</cfquery>
<cfquery name="allSublist" datasource="ds_source">
    select ecatid, esubcat as value, subcatname as text from esubcat order by subcatname
</cfquery>

<script>
// 预生成分类-子分类映射表
const catSubMap = {};
<cfoutput query="allSublist">
    if(!catSubMap['#allSublist.ecatid#']) catSubMap['#allSublist.ecatid#'] = [];
    catSubMap['#allSublist.ecatid#'].push({value: '#allSublist.value#', text: '#allSublist.text#'});
</cfoutput>
</script>

2. HTML下拉框结构（去掉原有的onchange属性）

Category: <br>
<select name="ecat" id="ecat"> 
    <option value="">- Select Category -</option> 
    <cfoutput query=catlist>
        <option value="#ecatid#">#catname#</option> 
    </cfoutput>
</select> 

<br>
SubCategory: <br>
<select name="esubcat" id="esubcat"> 
    <option value="">First Select Category Above</option> 
</select>

3. Selectize初始化与联动逻辑

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>

<script>
$(document).ready(function () {
    // 存储子分类的Selectize实例，方便后续操作
    let subcatSelectize;
    // 初始化子分类选择器
    $('#esubcat').selectize({
        sortField: 'text',
        onInitialize: function(){
            subcatSelectize = this;
        }
    });
    // 初始化分类选择器，绑定联动逻辑
    $('#ecat').selectize({
        sortField: 'text',
        onChange: function(selectedCatId){
            // 清空之前的子分类选项
            subcatSelectize.clear();
            subcatSelectize.clearOptions();
            // 未选中分类时显示默认提示
            if(!selectedCatId){
                subcatSelectize.addOption({value: '', text: 'First Select Category Above'});
                subcatSelectize.refreshOptions();
                return;
            }
            // 加载对应分类的子分类选项
            const subOptions = catSubMap[selectedCatId] || [];
            subcatSelectize.addOption(subOptions);
            subcatSelectize.refreshOptions();
        }
    });
});
</script>

说明 #

• 该方案完全保留option的value属性作为唯一标识，两个下拉框的搜索功能正常生效
• 去掉了冗余的嵌套CF查询和原生DOM操作逻辑，性能和可维护性更好

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