简单方便的省,市,区县三级联动

    xiaoxiao2022-07-05  186

    分享js链接

    链接:https://pan.baidu.com/s/1H-8_UK6rV2tOqBmKcixglQ  提取码:wni0   

    然后,界面引入该js

     

    然后html代码:

    <tr style="height:25px;">                                              <td class="r">户籍所在(省)</td>                                             <td></td>                                             <td>                                                 <select class="select" id="s_dprovince" name="s_dprovince" style="width:100%;">                                                    <option value="">--请选择省--</option>                                                 </select>                                             </td>                                             <td class="r">户籍所在(市)</td>                                             <td></td>                                             <td>                                                 <select class="select" id="s_dcity" name="s_dcity" style="width:100%;">                                                    <option value="">--请选择市--</option>                                                 </select>                                             </td>                                             <td class="r">户籍所在(县)</td>                                             <td></td>                                             <td>                                                 <select class="select" id="s_dcounty" name="s_dcounty" style="width:100%;" οnchange="getTown();">                                                    <option value="">--请选择区县--</option>                                                 </select>                                             </td>

            <input id="town1" name="town1" type="hidden" value="" />         <input id="address" name="address" type="hidden" value="" /> </tr>

    js代码: 

    界面初始化时候先调用:

    window.οnlοad=function(){     setup();//加载三级联动 }

    <script type="text/javascript">

       //这个函数是必须的,因为在area.js里每次更改地址时会调用此函数 function promptinfo(){     var address = document.getElementById('address');     var s1 = document.getElementById('s_dprovince');     var s2 = document.getElementById('s_dcity');     var town1 = document.getElementById('town1');     if(s1.value!="请选择省" && s2.value=='请选择市'){//若只选择了第一项,则地址就为某某省         address.value = s1.value;     }     if(s1.value!="请选择省" && s2.value!='请选择市'){//若只选择了前两项省和市,则地址就只显示"省|市"         address.value = s1.value+"|"+s2.value;     }     if(s1.value=="请选择省"){//若什么都不选,则隐藏域地址为空串         address.value="";     } } //获取区县的值(若不写这个触发函数,一直获取不到第三项区县的值,一直是默认值“请选择区县”) function getTown(){     var address = document.getElementById('address');     var s1 = document.getElementById('s_dprovince').value     var s2 = document.getElementById('s_dcity').value;     var s3 = document.getElementById('s_dcounty').value;     var town1 = document.getElementById('town1').value;     town1 = s3;     if(town1=="请选择区县"){        address.value = s1+"|"+s2;      }else{        address.value = s1+"|"+s2+"|"+town1;     } } 

    </script> 

    效果图为:

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    最新回复(0)