js题目11-优快云博客

<!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">
    <title>Document</title>
  </head>
  <style>
  *{
    margin: 0;
    padding: 0;
  }
  select{
    min-width: 100px;
  }
  option{
    display: inline-block;
    min-width: 100px;
  }
  button{
    width: 50px;
    height: 50px;
    margin-top: 50px;
  }
  </style>
  <body>
    <div id="container">
      <select name="" id="sheng">
        <option value="" selected disabled>请选择</option>
      </select>
      <select name="" id="shi">
        <option value="" selected disabled>请选择</option>
      </select>
  
      <select name="" id="qu">
        <option value="" selected disabled>请选择</option>
      </select>
    </div>
    <script>
      const sheng = document.getElementById("sheng")
      const shi = document.getElementById("shi")
      const qu = document.getElementById("qu")
      const arrSheng = ["江苏省", "安徽省"]
      for (let i = 0; i < arrSheng.length; i++) {
        const option = document.createElement("option")
        option.innerHTML = arrSheng[i]
        option.value = arrSheng[i]
        sheng.appendChild(option)
      }
      const objSheng = {
        "江苏省": ["南通市", "扬州市", "南京市"],
        "安徽省": ["合肥市", "淮北市", "宿州市"]
      }
      const objShi = {
        "南通市": ["崇川区", "港闸区"],
        "扬州市": ["邗江区", "广陵区"],
        "南京市": ["玄武区", "秦淮区"],
        "合肥市": ["瑶海区", "庐阳区"],
        "淮北市": ["相山区", "杜集区"],
        "宿州市": ["埇桥区", "萧县"],
      }
      sheng.onchange = function () {
        shi.innerHTML = "<option value=''selected disabled>请选择</option>"
        qu.innerHTML = "<option value=''selected disabled>请选择</option>"
        for (let i = 0; i < Object.keys(objSheng).length; i++) {
          if (sheng.value == Object.keys(objSheng)[i]) {
            const arr = objSheng[Object.keys(objSheng)[i]]
            for (let j = 0; j < arr.length; j++) {
              const option = document.createElement("option")
              option.innerHTML = arr[j]
              option.value = arr[j]
              shi.appendChild(option)
            }
          }
        }
      }
      shi.onchange = function () {
        qu.innerHTML = "<option value=''selected disabled>请选择</option>"
        for (let i = 0; i < Object.keys(objShi).length; i++) {
          if (shi.value == Object.keys(objShi)[i]) {
            const arr = objShi[Object.keys(objShi)[i]]
            for (let j = 0; j < arr.length; j++) {
              console.log(arr[j])
              const option = document.createElement("option")
              option.innerHTML = arr[j]
              option.value = arr[j]
              qu.appendChild(option)
            }
          }
        }
      }
    </script>
  </body>
  </html>