js+css实现全国各省市大学名称三级联动下拉菜单选择代码
代码语言:html
所属分类:其他
代码描述:js+css实现全国各省市大学名称三级联动下拉菜单选择代码
代码标签: js css 全国 各 省 市 大学 名称 三级 联动 下拉 菜单 选择 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; box-sizing: border-box; list-style: none; } .container { width: 100vw; height: 100vh; display: flex; justify-content: center; background-color: lightblue; } .content { width: 300px; margin-top: 100px; } .item { width: 100%; height: 42px; background-color: #fff; border-radius: 8px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; padding: 0 10px; } .left { width: 70px; height: 42px; line-height: 42px; color: #03a9f4; font-weight: bold; display: flex; justify-content: center; align-items: center; position: relative; } .left::after { content: ''; position: absolute; width: 2px; height: 60%; right: 0; background-color: #ccc; border-radius: 4px; } .right { flex: 1; height: 42px; color: #011627; padding-left: 20px; } select { width: 100%; height: 100%; border-color: transparent; outline: none; } </style> </head> <body> <div class="container"> <ul class="content"> <li class="item"> <div class="left">省会</div> <div class="right"> <select name="province" id="province"> <option value="000">请选择</option> </select> </div> </li> <li class="item"> <div class="left">城市</div> <div class="right"> <select name="city" id="city"> </select> </div> </li> <li class="item"> <div class="left">学校</div> <div class="right"> <select name="school" id="school"> </select> </div> </li> </ul> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/university.data.js"></script> <script > const dom = el => document.querySelector(el) const province = dom('#province') const city = dom('#city') const school = dom('#school') // 渲染省会列表 // - 创建省会文本片段 const provinceFragment = document.createDocumentFragment(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0