虚拟主机域名注册-常见问题 → 网络编程问题 → JS | |||||||
js实现省市区县三级联动 可自定义初始值
电商平台或者一些网站的个人信息部分,通常会有填写地址的功能。该功能一般分为二级联动(省、市)和三级联动(省、市、区),只需要JavaScript就可以实现。 这里介绍一种很简洁易用的方法。参考地址:https://github.com/fengyuanchen/distpicker 获取上面Github目录下的dist/distpicker.js文件,然后准备一份jquery.js文件。 接下来,新建一个测试的HTML页面。 首先,引入以上的两个js文件: 【注意】jquery文件一定要在distpicker前面,否则无法生效 <script src="/path/to/jquery.js"></script><!-- jQuery is required --> <script src="/path/to/distpicker.js"></script> 然后,新建select选择器: <div><!-- container --> <select></select><!-- province --> <select></select><!-- city --> <select></select><!-- district --> </div> 要想实现三级联动,需要进行初始化,方法就是为div元素添加一个属性: <div data-toggle="distpicker"> <select></select> <select></select> <select></select> </div> 有时,根据自己需要,会为选择框设定默认值,同样需要为select元素添加属性: <div data-toggle="distpicker"> <select data-province="---- 选择省 ----"></select> <select data-city="---- 选择市 ----"></select> <select data-district="---- 选择区 ----"></select> </div>
|
|||||||
>> 相关文章 | |||||||
发表评论 | |||||||