JQuery Chosen多选下拉框选项无法动态填充问题求助

问题原因 #

用Chosen插件改造多选下拉框后，插件会生成自定义UI替代原生select的显示。直接通过innerHTML修改原生select的选项时，Chosen不会自动同步这些变化到它的UI上，所以看起来选项没被填充。

解决步骤 #

1. 修复未定义变量问题：代码里Object.keys(regions)中的regions未定义，需改成dict1，否则初始地区下拉框也无法正常加载。
2. 更新Chosen实例：在createOption函数末尾添加判断，若当前下拉框已被Chosen初始化，就触发更新事件，让Chosen同步新选项。

修改后的完整代码 #

<script src="https://js.arcgis.com/4.25/"></script>
<script src="https://cdn.jsdelivr.net/gh/harvesthq/chosen@gh-pages/docsupport/jquery-3.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/harvesthq/chosen@gh-pages/chosen.jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/harvesthq/chosen@gh-pages/chosen.min.css" rel="stylesheet">

<script>
$(document).ready(function() {
    $(".chosen-select").chosen({
        no_results_text: "Oops, nothing found!"
    })
});
</script>

<script>
var dict1 = {'Canada': ['', 'Toronto'],'USA': ['', 'Hawaii']};
var dict2= {'Toronto': ['','A', 'B'],'Hawaii': ['C', 'D']};
var dict3 = {
    'A': ['Item1', 'Item2'],
    'B': ['Item3', 'Item4'],
    'C': ['Item5', 'Item6'],
    'D': ['Item7', 'Item8']
};

var regionOption = document.querySelector("#municipality");
var districtOption = document.querySelector("#districtName");
var provOption = document.querySelector("#region");
var neighOption = document.querySelector("#selectNeigh");

// 修复：将regions改为dict1
createOption(provOption, Object.keys(dict1));

provOption.addEventListener('change', function() {
    createOption(regionOption, dict1[provOption.value]);
});

regionOption.addEventListener('change', function() {
    createOption(districtOption, dict2[regionOption.value]);
});

districtOption.addEventListener('change', function() {
    createOption(neighOption, dict3[districtOption.value]);
});

function createOption(dropDown, options) {
    dropDown.innerHTML = '';
    options.forEach(function(value) {
        dropDown.innerHTML += '<option name="' + value + '">' + value + '</option>';
    });
    // 新增：如果当前元素是Chosen实例，触发更新
    if ($(dropDown).hasClass('chosen-select')) {
        $(dropDown).trigger("chosen:updated");
    }
};
</script>

<body>
    <select id="region" style="width: 125px;"></select>
    <select id="municipality" style="width: 125px;"></select>
    <select id="districtName" style="width: 125px;"></select>
    <form action="http://httpbin.org/post" method="post">
        <select data-placeholder='Select Neighbourhoods' id="selectNeigh" multiple class='chosen-select' style="width: 125px;"></select>
    </form>
</body>

关键修改点说明 #

• 修正createOption(provOption, Object.keys(regions))为createOption(provOption, Object.keys(dict1))，解决初始下拉框无选项的问题。
• 在createOption函数末尾添加Chosen更新逻辑，确保原生select选项修改后，Chosen的UI能同步更新。

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