在HTML中,多级选择通常使用<select>
标签和嵌套的<option>
标签来实现,以下是一个简单的示例:
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>多级选择示例</title> </head> <body> <h2>多级选择示例</h2> <form> <label for="countries">国家:</label> <select id="countries" onchange="updateCities()"> <option value="china">中国</option> <option value="usa">美国</option> </select> <label for="cities">城市:</label> <select id="cities"> <!这里将根据选择的国家动态更新城市选项 > </select> </form> <script> function updateCities() { var countriesSelect = document.getElementById("countries"); var citiesSelect = document.getElementById("cities"); var selectedCountry = countriesSelect.value; // 清空城市选择框 citiesSelect.innerHTML = ""; // 根据选择的国家添加城市选项 if (selectedCountry === "china") { citiesSelect.innerHTML = ` <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> `; } else if (selectedCountry === "usa") { citiesSelect.innerHTML = ` <option value="newyork">纽约</option> <option value="losangeles">洛杉矶</option> <option value="chicago">芝加哥</option> `; } } </script> </body> </html>
在这个示例中,我们创建了一个包含两个<select>
标签的表单,第一个<select>
标签用于选择国家,第二个<select>
标签用于选择城市,当用户选择一个国家时,会触发onchange
事件,调用updateCities()
函数来更新城市选择框的选项,这个函数会根据选择的国家动态生成相应的城市选项。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
评论(0)