html中的二级联动问题，代码已经献上！联动不了，求大神给看看

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>联动</title>

</head>
<body>
  <select id="city">
   <option value="bj">北京</option>
   <option value="sx">山西</option>
   <option value="tj">天津</option>
   <option value="hb">河北</option>
  </select>
  <select id="area">
   <option >朝阳</option>
   <option >海淀</option>
   <option >昌平</option>;
  </select>

</body>
  <script type="text/javascript">
  var select = document.getElementById("city");
  select.onchange = function(){
   var optionVal = select.value;
   switch(optionVal){
    case 'bj':
     var area = document.getElementById("area");
     area.innerHTML ="<option >朝阳</option><option >海淀</option><option >昌平</option>";
     break;
    case 'tj':
     var area = document.getElementById("area");
     area.innerHTML ="<option >浦东</option><option >浦西</option><option >杨浦</option>";
     break;
    case 'sx';
     var area = document.getElementById("area");
     area.innerHTML ="<option >忻州</option><option >朔州</option><option >太原</option>";
     break;
    case 'hb';
     var area = document.getElementById("area");
     area.innerHTML ="<option >衡水</option><option >保定</option><option >青皇岛</option>";
     break;
    default:
     alert("error");
   }
  };
</script>

</html>

慕粉3922300

浏览 1907回答 2

html中的二级联动问题，代码已经献上！联动不了，求大神给看看

2回答