联动下拉框开发需求：选择加拿大时动态填充ville选项

没问题，我来帮你搞定这个需求。核心是监听国家下拉框的选择变化，当选中「Canada」时，动态生成对应的城市选项并添加到城市下拉框中。这里有个小细节：你原来的两个国家选项value都是1，所以判断的时候得结合选项文本，或者建议你修改value值让判断更清晰，我会在代码里说明。

完整实现代码 #

<!DOCTYPE html>
<html>
<head>
    <title>动态加载城市选项</title>
    <script>
        function updateCities() {
            // 获取两个下拉框DOM元素
            const countrySelect = document.getElementById('pays');
            const citySelect = document.getElementById('ville');
            
            // 先清空城市下拉框的现有内容，避免重复添加
            citySelect.innerHTML = '';
            
            // 注意：原来的Canada和France的value都是1，所以通过选项文本判断
            const selectedCountry = countrySelect.options[countrySelect.selectedIndex].text;
            
            if (selectedCountry === 'Canada') {
                // 定义加拿大的城市列表
                const canadianCities = ['Toronto', 'Montreal', 'Vancouver', 'Calgary', 'Edmonton'];
                // 遍历城市列表，创建option元素并添加到下拉框
                canadianCities.forEach(city => {
                    const option = document.createElement('option');
                    option.value = city.toLowerCase().replace(' ', '-'); // 设置value为小写连字符格式
                    option.textContent = city; // 设置显示文本
                    citySelect.appendChild(option);
                });
            } else if (selectedCountry === 'France') {
                // 可选：也可以给法国添加对应的城市
                const frenchCities = ['Paris', 'Lyon', 'Marseille', 'Nice'];
                frenchCities.forEach(city => {
                    const option = document.createElement('option');
                    option.value = city.toLowerCase();
                    option.textContent = city;
                    citySelect.appendChild(option);
                });
            }
        }
    </script>
</head>
<body>
    <fieldset>
        <legend>D'où venez-vous ?</legend>
        <div>Pays: 
            <!-- 给国家下拉框添加onchange事件，选择变化时触发更新 -->
            <select id="pays" onchange="updateCities()">
                <option value="1">Canada</option>
                <option value="2">France</option> <!-- 建议修改value为2，这样判断更可靠 -->
            </select>
        </div>
        <div>Ville:
            <select id="ville"></select>
        </div>
    </fieldset>
</body>
</html>

关键说明 #

• 事件监听优化：把原来城市下拉框的onclick换成了国家下拉框的onchange，这样用户一选择国家就立刻触发城市更新，体验更流畅。
• 清空现有选项：每次更新前先清空城市下拉框，避免多次选择后选项重复堆积。
• 选项判断优化：我建议把France的value改成2，这样在函数里可以直接用countrySelect.value === '1'来判断是否选中Canada，比判断文本更可靠（文本可能有拼写或翻译变化）。
• 动态创建元素：通过document.createElement('option')创建选项，再用appendChild添加到下拉框，这是原生JS动态添加选项的标准方式，兼容性好且易维护。

内容的提问来源于stack exchange，提问作者Engjëll Bislimi