多选项联动下拉菜单（国家-州）改造技术求助

问题背景 #

现有单选项国家-州联动下拉菜单代码运行正常，需将其改造为支持多选的联动下拉菜单。以下为原可正常运行的单选项代码：

<form class="form-signin" method="post" id="serchform" action="search-profile-result.php?page_id=1">
    
<label for="country">Country</label>
<select class="form-control" id="country" name="country[]" required="required" onchange="setStates(this);" multiple>
    
<option value="USA" label="USA">USA</option>
<option value="UK" label="UK">UK</option>
<option value="Canada" label="Canada">Canada</option> </select>
    
<label for="state">State</label>
<select id="state" name="state[]" class="form-control" required="required" multiple>
<option disabled>Select Country First</option>  </select>

</form>

<script>
var states = new Array();

states['USA'] = new Array('Alabama','Alaska','Arizona','Other');
states['UK'] = new Array('Aberdeenshire','Angus','Antrim','Other');
states['Canada'] = new Array('Alberta','British-Columbia','Manitoba','Other');

function setStates() {
countrSel = document.getElementById('country');
stateList = states[countrSel.value];
changeSelect('state', stateList, stateList);
}
function changeSelect(fieldID, newOptions, newValues) {
selectField = document.getElementById(fieldID);
selectField.options.length = 0;
for (i=0; i<newOptions.length; i++) {
selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}

addLoadEvent(function() {
setStates();
}); 
</script>

改造后的完整代码 #

<form class="form-signin" method="post" id="serchform" action="search-profile-result.php?page_id=1">
    
<label for="country">Country</label>
<select class="form-control" id="country" name="country[]" required="required" onchange="setStates(this);" multiple>
    
<option value="USA" label="USA">USA</option>
<option value="UK" label="UK">UK</option>
<option value="Canada" label="Canada">Canada</option> </select>
    
<label for="state">State</label>
<select id="state" name="state[]" class="form-control" required="required" multiple>
<option disabled>Select Country First</option>  </select>

</form>

<script>
var states = new Array();

states['USA'] = new Array('Alabama','Alaska','Arizona','Other');
states['UK'] = new Array('Aberdeenshire','Angus','Antrim','Other');
states['Canada'] = new Array('Alberta','British-Columbia','Manitoba','Other');

function setStates(countrySelect) {
    // 获取所有选中的国家
    const selectedCountries = Array.from(countrySelect.selectedOptions).map(opt => opt.value);
    let combinedStates = [];
    
    // 合并选中国家对应的州列表
    selectedCountries.forEach(country => {
        if (states[country]) {
            combinedStates = combinedStates.concat(states[country]);
        }
    });
    
    // 更新州下拉菜单
    changeSelect('state', combinedStates, combinedStates);
}

function changeSelect(fieldID, newOptions, newValues) {
    const selectField = document.getElementById(fieldID);
    selectField.options.length = 0;
    
    // 无选中国家时显示提示
    if (newOptions.length === 0) {
        selectField.options[0] = new Option('Select Country First', '', true, true);
        selectField.options[0].disabled = true;
        return;
    }
    
    // 添加所有合并后的州选项
    for (let i = 0; i < newOptions.length; i++) {
        selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
    }
}

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

addLoadEvent(function() {
    // 页面初始化时设置州下拉为提示状态
    const stateSelect = document.getElementById('state');
    stateSelect.options.length = 0;
    stateSelect.options[0] = new Option('Select Country First', '', true, true);
    stateSelect.options[0].disabled = true;
}); 
</script>

关键修改说明 #

• 多选国家处理：替换原仅获取单个选中值的逻辑，通过selectedOptions获取所有选中的国家，提取其值后遍历合并对应州列表。
• 空状态优化：当未选中任何国家时，州下拉显示提示文本并禁用，符合引导逻辑。
• 初始化逻辑调整：页面加载时不再自动加载某个国家的州，而是直接设置提示状态，避免初始状态混乱。

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