JQuery实现三级联动区域选择

行也成文 7/30/2019 js

Jquery 实现一个超简单的三级联动效果。

# 准备

准备三个文件，分别是

-     // 文件夹
-- index.html
-- jquery.min.js      // jquery 库文件
-- data.js            // 城市数据

1
2
3
4

快速链接:

城市数据的格式大概像这样：

{
    id: 1,
    name: '北京',
    city: [{
      id: 1,
      name: '北京市',
      district: [{
          id: 1,
          name: '东城区'
      }],
    }],
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 开始

Step 1: 编写 html 结构，三个 select 框

<select name="province" id="d_province">
  <option value="">请选择</option>
</select>

<select name="city" id="d_city">
  <option value="">请选择</option>
</select>
<select name="area" id="d_area">
  <option value="">请选择</option>
</select>

1
2
3
4
5
6
7
8
9
10

Step 2: 让省份数据插入到省份 select 框中

    const provinceSelect = (el, data) => {
      for (let i = 0; i < data.length; i++) {
        const $item = `<option value="${i}">${data[i].name}</option>`
        $(`#${el}`).append($item);
      }
    }

    $(provinceSelect('d_province', chineseCities));

1
2
3
4
5
6
7
8
9