jQuery cityPicker是一个用于移动端的省市区/县选择下拉菜单,它具有三级联动功能,使用户可以方便地选择所需的地区。该插件支持滑动选择,可以在移动设备上进行使用。下面我们将介绍如何使用这个插件。

安装

要使用jQuery cityPicker,您需要先下载它。您可以从GitHub上找到该插件,并将其下载至本地计算机。

<script src="jquery.min.js"></script>
<script src="city-picker.min.js"></script>
<link rel="stylesheet" href="city-picker.css">

在HTML文件中引用以上文件即可。需要注意的是,city-picker.min.js和city-picker.css文件需要放在同一个目录下。

使用

cityPicker插件的使用非常简单。在HTML中创建一个<div>元素作为插件容器:

<div class="city-picker-container">
  <input type="text" class="city-picker-input" readonly>
</div>

在JavaScript中初始化插件:

$(".city-picker-input").cityPicker();

您已经成功添加了jQuery cityPicker插件,并且可以在页面中看到一个下拉菜单。当用户点击输入框时,下拉菜单将弹出,用户可以选择所需要的地区。

配置选项

jQuery cityPicker插件支持多种配置选项,以适应不同的需求。以下是一些常用选项:

  • province: 省份数据源,为数组类型,默认值为null。
  • city: 城市数据源,为数组类型,默认值为null。
  • district: 区县数据源,为数组类型,默认值为null。
  • value: 默认值,为字符串类型,默认值为null。
  • onChange: 值改变时的回调函数,为函数类型,默认值为null。

您可以在初始化时传入这些选项,例如:

$(".city-picker-input").cityPicker({
  province: ["浙江省", "江苏省", "广东省"],
  city: {
    "浙江省": ["杭州市", "宁波市", "温州市"],
    "江苏省": ["南京市", "苏州市", "无锡市"],
    "广东省": ["广州市", "深圳市", "珠海市"]
  },
  district: {
    "杭州市": ["西湖区", "上城区", "下城区"],
    "宁波市": ["海曙区", "江东区", "江北区"],
    "温州市": ["鹿城区", "龙湾区", "瓯海区"]
  },
  value: "江苏省,无锡市,梁溪区",
  onChange: function (picker) {
    console.log(picker.val());
  }
});

结论

jQuery cityPicker插件是一个非常实用的移动端省市区/县选择下拉菜单,具有三级联动和滑动选择功能。通过上述介绍,您可以轻松地将其添加到您的应用程序中,并根据需要进行配置。