首页两个下拉框都不隐藏的联动查询示例

两个下拉框都不隐藏的联动查询示例

时间: 2024-09-23 19:02:26 浏览: 42

在一个典型的联动查询示例中，当第一个下拉框（通常称为“主选框”）的选择发生变化时，第二个下拉框的内容会根据主选框的值动态更新。这里有个简单的HTML和JavaScript的示例： ```html <!DOCTYPE html> <html lang="en"> <head> <title>联动查询</title> </head> <body> <select id="province" onchange="loadCities()"> <option value="">请选择省份</option>  </select> <select id="city" style="display: none;"> <option value="">请选择城市</option> </select> <script> function loadCities() { var provinceSelect = document.getElementById("province"); var citySelect = document.getElementById("city"); if (provinceSelect.value) { // 假设从服务器获取城市列表 fetch('/api/cities?province=' + provinceSelect.value) .then(response => response.json()) .then(cities => { citySelect.innerHTML = ''; cities.forEach(city => { citySelect.appendChild(new Option(city.name, city.id)); }); citySelect.style.display = 'block'; }) .catch(error => console.error('Error:', error)); } else { citySelect.innerHTML = ''; citySelect.style.display = 'none'; } } </script> </body> </html> ``` 在这个例子中，当用户更改了`province` select的选项，`loadCities`函数会被触发，通过AJAX请求获取与所选省份对应的`city`列表，然后填充到`city` select中。如果没有选择省份，则`city` select会保持默认隐藏状态。

阅读全文