在前端开发中,经常需要使用到省市区三级联动或者城市二级联动的选择功能。本文将介绍一个简单的JS实现方法,并提供示例代码。
实现思路
实现城市二级联动选择功能,主要思路是通过两个下拉框来实现。当用户选择第一个下拉框中的某一项时,第二个下拉框中会自动更新对应的选项。这个过程可以分为以下几个步骤:
- 获取省份数据以及每个省份对应的城市数据。
- 创建两个下拉框:一个用于显示省份列表,另一个用于显示城市列表。
- 绑定省份下拉框的onchange事件,当用户选择某个省份时,根据该省份获取对应的城市数据,然后更新城市下拉框的选项。
- 根据用户的选择,获取最终选择的省份和城市。
代码实现
HTML结构
先来看一下HTML结构部分,包括两个下拉框以及对应的id和name属性:
------------------ ------- ------------- ------------------------- ------------------ ------- --------- ---------------------
JS实现
接下来是JS实现部分,首先定义一个数组来存储省份数据以及每个省份对应的城市数据:
--- -------- - - ------ ------- ------ ------ ------ ------- ------ ------- ------ ------ ------ ------ ------ ------ ------ ------ ------- ------ ------- ------ ------ ------ ------ ------ ------ ------ ------ ------ ------- ------ ------ ------ ------ ------- -- ------------ --
接着,定义一个函数用于初始化省份下拉框中的选项,并将该函数绑定到body的onload事件上:
-------- -------------- - --- -------------- - ------------------------------------ --- ---- -------- -- --------- - --- ------ - --------------------------------- ------------ - --------- ---------------- - --------- ----------------------------------- - - -------------------- - -------------
然后,定义一个函数用于更新城市下拉框中的选项,并将该函数绑定到省份下拉框的onchange事件上:
-------- ------------ - --- -------------- - ------------------------------------ --- ---------- - -------------------------------- --- -------- - --------------------- --- ------ - ------------------- -------------------- - --- --- ---- - - -- - - -------------- ---- - --- ------ - --------------------------------- ------------ - ---------- ---------------- - ---------- ------------------------------- - - -------------------------------------------- - -----------
最后,定义一个函数用于获取用户选择的省份和城市:
-------- ----------------- - --- -------------- - ------------------------------------ --- ---------- - -------------------------------- --- -------- - --------------------- --- ---- - ----------------- ------------- - -------- - - - - - ------ -
完整代码
下面是完整的HTML和JS代码:
--------- ----- ------ ------ ----- ---------------------------------------------------------- ---------- -------------------------------------------------------------------------------------