jquery省市区三级联动插件CitySelect教程

来源:互联网 发布:vorx以太网数据光端机 编辑:程序博客网 时间:2024/06/05 17:53

       CitySelect是jquery的一款可自定义的省市区三级级联插件,它没有对select控件作美化,只是实现了三级联动功能,但已经很方便使用了。Ok,回到主题,接下来我们来看使用步骤:

        一:引入相关文件

        引入city.min.js(城市数据都写在这个文件里,我们可以自己维护它)和jquery.cityselect.js文件,jquery.cityselect.js文件里引用了city.min.js,写在settings里,我们要把此处的url改成我们本地放置city.min.js的路径。引入之前需先引入jquery文件,这个就不多说了。插件下载地址:http://download.csdn.net/detail/qq_33556185/9437661

        二:在需要的地方引入如下html

           <div id="citySelect"  style="float:left;margin-left: 15px;">                                       <select class="prov" id="province"></select>                    <select class="city" disabled="disabled" id="city"></select>                    <select class="dist" disabled="disabled" id="county"></select>            </div>

         三:初始化控件

       nodata:设置此属性为”none“,则会出现”请选择“选项;

       required:是否必选;

       prov:省的默认值,可不写此属性;

       city:地市的默认值,可不写;

       dist:区的默认值,可不写。

        $("#citySelect").citySelect({               nodata: "none",               required: false,               prov:json.data.province,               city:json.data.city,               dist:json.data.county         });

       如此就可以使用了。



5 0