如何获取动态填充的下拉选择框（select）的选中值？

你已经完成了三级联动下拉框的动态填充，现在要获取选中值并实现特定条件的判断逻辑，以下是具体实现方法：

原实现代码 #

JavaScript 代码

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

createOption(provOption, Object.keys(regions));

provOption.addEventListener('change', function() {
    createOption(regionOption, regions[provOption.value]);
});
regionOption.addEventListener('change', function() {
      createOption(districtOption, districts[regionOption.value]);
});
function createOption(dropDown, options) {
    dropDown.innerHTML = '';
        options.forEach(function(value) {
            dropDown.innerHTML += '<option name="' + value + '">' + value + '</option>';
        });
};

HTML 代码

<select id="region" style="width: 125px;"></select>
<select id="municipality" style="width: 125px;"></select>
<select id="districtName" style="width: 125px;"></select>

选中值获取与条件判断实现 #

每个下拉框的选中值可以直接通过其value属性获取，你可以在需要的时机（比如下拉框变更时、按钮点击时）执行条件判断逻辑：

1. 添加通用检查函数

先定义一个函数来处理条件判断和对应的操作：

function checkSelectedValues() {
    // 获取三个下拉框的选中值
    var provValue = provOption.value;
    var regionValue = regionOption.value;
    var districtValue = districtOption.value;

    // 示例：当省份为'A'且地市为'B'时执行操作
    if (provValue === 'A' && regionValue === 'B') {
        // 这里写你要执行的操作，比如弹窗、修改DOM等
        console.log("满足条件，执行操作");
        // 示例操作：document.getElementById('someElement').style.display = 'block';
    }

    // 你可以根据需求添加更多判断逻辑
    // 比如：if (regionValue === 'X' && districtValue === 'Y') { ... }
}

2. 在合适的时机触发检查

• 如果要在每次下拉框变更时自动检查，修改现有的change事件监听：

provOption.addEventListener('change', function() {
    createOption(regionOption, regions[provOption.value]);
    checkSelectedValues(); // 变更后检查
});
regionOption.addEventListener('change', function() {
    createOption(districtOption, districts[regionOption.value]);
    checkSelectedValues(); // 变更后检查
});
districtOption.addEventListener('change', function() {
    checkSelectedValues(); // 区县变更时也检查
});

• 也可以通过按钮点击触发检查，比如添加一个按钮：

<button onclick="checkSelectedValues()">检查选中值</button>

这样就能在满足指定条件时自动或手动触发对应的操作了。

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