前端学习之select控件的使用2，省市县三级联动选择，select控件属性方法事件的综合应用

Posted 2020-10-09

总结select控件的属性、方法、事件的使用。数据源使用json数据，包括json数据的遍历。

<label for="sheng">省</label>
<select id="sheng" name="sheng">
  <option value=‘00‘>请选择</option>
  <option value=‘11‘>北京市</option>
  <option value=‘12‘>天津市</option>
  <option value=‘13‘>河北省</option>
</select>

<label for="shi">市（区）</label>
<select id="shi" name="shi">
</select>

<label for="xian">县（区）</label>
<select id="xian" name="xian">
</select>

<br>

<div id="jieguo" name="jieguo" style="border-top:1px dotted #ccc;margin-top:5px;"/>


<script type="text/javascript">
  var provinces=[
        {"code":"11","name":"北京市","cities":[
          {"code":"1101","name":"市辖区","counties":[
            {"code":"110101","name":"东城区"},
            {"code":"110102","name":"西城区"},
            {"code":"110105","name":"朝阳区"},
            {"code":"110106","name":"丰台区"},
            {"code":"110108","name":"海淀区"}
          ]}
        ]},//北京市结束
        {"code":"12","name":"天津市","cities":[
          {"code":"1201","name":"市辖区","counties":[
            {"code":"120101","name":"和平区"},
            {"code":"120102","name":"河东区"},
            {"code":"120103","name":"河西区"},
            {"code":"120104","name":"南开区"},
            {"code":"120105","name":"河北区"}
          ]}        
        ]},//天津市结束
        {"code":"13","name":"河北省","cities":[
          {"code":"1301","name":"石家庄市","counties":[
            {"code":"130101","name":"市辖区"},
            {"code":"130102","name":"长安区"},
            {"code":"130104","name":"桥西区"},
            {"code":"130105","name":"新华区"},
            {"code":"130107","name":"井陉矿区"}
          ]},//石家庄市结束
          {"code":"1302","name":"唐山市","counties":[
            {"code":"130201","name":"市辖区"},
            {"code":"130202","name":"路南区"},
            {"code":"130203","name":"路北区"},
            {"code":"130205","name":"开平区"},
            {"code":"130209","name":"曹妃甸区"}
          ]}//唐山市结束
        ]}//河北省结束
      ]


  window.onload=function(){
    var sheng=document.getElementById("sheng");
    var shi=document.getElementById("shi");
    var xian=document.getElementById("xian");
    //选择省后执行的事件处理程序
    sheng.onchange=function(e){
      shi.options.length=0;
      xian.options.length=0;
      var s=sheng.options[sheng.selectedIndex].value;
      if(s!=‘00‘){
        shi.options.add(new Option("请选择","0000"));
        for(var i=0;i<provinces.length;i++){
          if(provinces[i].code==s){
            for(var j=0;j<provinces[i].cities.length;j++){
              shi.options.add(new Option(provinces[i].cities[j].name,provinces[i].cities[j].code));
            }
            break;
          }
        }
      }
    };
    //选择市后执行的事件处理程序
    shi.onchange=function(e){
      xian.options.length=0;
      var s1=sheng.options[sheng.selectedIndex].value;
      var s2=shi.options[shi.selectedIndex].value;
      if(s2!="0000"){
        xian.options.add(new Option("请选择","000000"));
        for(var i=0;i<provinces.length;i++){
          var province=provinces[i];
          if(province.code==s1){
            for(var j=0;j<province.cities.length;j++){
              var city=province.cities[j];
              if(city.code==s2){
                for(var k=0;k<city.counties.length;k++){
                  var county=city.counties[k];
                  xian.options.add(new Option(county.name,county.code));  
                }
                break;
              }
            }
            break;
          }
        }
      }
    };
    //选择县后执行的事件处理程序
    xian.onchange=function(e){
      if(sheng.selectedIndex>0){
        var s=sheng.options[sheng.selectedIndex].text;
        if(shi.selectedIndex>0){
          s+=shi.options[shi.selectedIndex].text;
          if(xian.selectedIndex>0){
            s+=xian.options[xian.selectedIndex].text;
            document.getElementById("jieguo").innerhtml="<p>您的选择是："+s+"</p>";
          }
        }
      }
    };
  };

</script>