css下拉框选择省份 匹配出市

CSS下拉框选择省份 匹配出市

HTML代码：
<select id="province">
  <option value="">请选择省份</option>
  <option value="北京市">北京市</option>
  <option value="上海市">上海市</option>
  <option value="广东省">广东省</option>
</select>

<select id="city">
  <option value="">请选择市</option>
</select>

JavaScript代码：
//获取下拉框
var province = document.getElementById("province");
var city = document.getElementById("city");

//下拉框change事件
province.onchange = function(){
  //获取选中的省份
  var pValue = province.value;
  //判断省份是否选择
  if(pValue == ""){
    //清空城市下拉框内容
    city.length = 1;
    return;
  }
  //根据省份设置城市
  switch(pValue){
    case "北京市":
      city.options[0] = new Option("请选择市","");
      city.options[1] = new Option("东城区","东城区");
      city.options[2] = new Option("西城区","西城区");
      city.options[3] = new Option("朝阳区","朝阳区");
      break;
    case "上海市":
      city.options[0] = new Option("请选择市","");
      city.options[1] = new Option("黄浦区","黄浦区");
      city.options[2] = new Option("徐汇区","徐汇区");
      city.options[3] = new Option("长宁区","长宁区");
      break;
    case "广东省":
      city.options[0] = new Option("请选择市","");
      city.options[1] = new Option("广州市","广州市");
      city.options[2] = new Option("深圳市","深圳市");
      city.options[3] = new Option("珠海市","珠海市");
      break;
    default:
      city.length = 1;
  }
}

CSS代码：
select{
  width: 150px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 10px;
}