分享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>
效果图为: