javascript实现省市多选 | 您所在的位置:网站首页 › vue实现城市选择 › javascript实现省市多选 |
随着信息化时代的加速发展,互联网已经成为我们生活中必不可少的一部分,人们在日常生活中通过电脑、手机等设备使用互联网,已经成为一种必要的习惯。而在网页设计中,经常会涉及到省市多选的功能,这就需要我们使用 JavaScript 来实现。 一、实现思路 在实现省市多选功能的过程中,我们需要用到多个下拉菜单,每个下拉菜单对应一个级别的地区,其中顶层下拉菜单为省份选择,下拉菜单中的选项为省份名称;当用户选择了省份后,下面的下拉菜单就会动态生成,以显示该省份中所有的市区,市区名称为下拉菜单的选项;当用户选中某市后,下面的下拉菜单就会再次生成,以显示该市区中的所有县区,县区名称为下拉菜单的选项。 针对该功能实现的思路,我们可以采用一些 JavaScript 库来提高编码效率,如 jQuery 等库。 二、实现方式 组件结构在实现该功能之前,我们首先需要搭建一个组件结构。组件结构可能会根据实际需要而有所不同,这里我们采用一种比较常见的方式来进行实现,如下所示: 请选择省份 请选择城市 请选择区域 登录后复制该组件结构中,我们首先定义了三个下拉菜单组件,分别对应“省份”、“城市”以及“区域”。这里我们分别为它们设置了 id 属性,以方便后续的操作。 省份数据在实现省份多选功能之前,我们需要先准备好省份数据,即将所有的省份名称存储在一个数组中,这样在渲染省份下拉菜单时,才能够让用户进行选择。为了演示方便,这里我们直接定义一个数组来存储省份数据。 var provinceArray = [ {"name": "北京市", "value": "110000"}, {"name": "天津市", "value": "120000"}, {"name": "河北省", "value": "130000"}, …… ];登录后复制在上述代码中,我们定义了一个省份数组,它包含了所有的省份以及它们的 value 值,这个 value 值是用来区分每个省份的。 渲染省份下拉菜单有了省份数据之后,接下来我们就需要通过 JavaScript 代码来渲染省份下拉菜单了。我们可以通过 jQuery 等库来实现这个操作。 function renderProvince() { var html = '请选择省份'; for (var i = 0; i < provinceArray.length; i++) { html += '' + provinceArray[i].name + ''; } $('#province').html(html); }登录后复制通过上述代码段,我们可以将省份数据渲染到省份下拉菜单中。这里我们采用了一个 for 循环来进行遍历,然后将遍历结果用 标签的形式插入到省份下拉菜单中。 渲染城市下拉菜单当用户选择了某个省份之后,我们就需要根据当前选择的省份,来动态生成该省份的所有城市。实现该操作同样需要用到 jQuery 等库。该操作的实现需要分为两步:第一步是获取当前选择的省份;第二步是根据省份信息,动态生成城市下拉菜单。具体操作如下: function renderCity(provinceValue) { var cityArray = [ {"name": "城市1", "value": "110100"}, {"name": "城市2", "value": "110200"}, {"name": "城市3", "value": "110300"}, …… ]; var html = '请选择城市'; for (var i = 0; i < cityArray.length; i++) { if (cityArray[i].value.substring(0, 2) === provinceValue.substring(0, 2)) { html += '' + cityArray[i].name + ''; } } $('#city').html(html); }登录后复制在该代码段中,我们首先定义了城市数据,包含了所有的城市以及它们的 value 值。然后在遍历城市数据的过程中,我们通过 if 语句来判断当前遍历项是否属于当前选择的省份,如果属于,则将它渲染到城市下拉菜单中。 渲染区县下拉菜单获取到用户选择的城市之后,我们就需要根据当前选择的城市,来动态生成该城市的所有区县。实现该操作的代码如下: function renderDistrict(cityValue) { var districtArray = [ {"name": "区县1", "value": "110101"}, {"name": "区县2", "value": "110102"}, {"name": "区县3", "value": "110103"}, …… ]; var html = '请选择区域'; for (var i = 0; i < districtArray.length; i++) { if (districtArray[i].value.substring(0, 4) === cityValue.substring(0, 4)) { html += '' + districtArray[i].name + ''; } } $('#district').html(html); }登录后复制在该代码段中,我们首先定义了区县数据,包含了所有的区县以及它们的 value 值。然后在遍历区县数据的过程中,同样通过 if 语句来判断当前遍历项是否属于当前选择的城市,如果属于,则将它渲染到区县下拉菜单中。 代码汇总将上述代码整合在一起,我们就可以实现省市区多选了,完整代码如下: var provinceArray = [ {"name": "北京市", "value": "110000"}, {"name": "天津市", "value": "120000"}, {"name": "河北省", "value": "130000"}, …… ]; function renderProvince() { var html = '请选择省份'; for (var i = 0; i < provinceArray.length; i++) { html += '' + provinceArray[i].name + ''; } $('#province').html(html); } function renderCity(provinceValue) { var cityArray = [ {"name": "城市1", "value": "110100"}, {"name": "城市2", "value": "110200"}, {"name": "城市3", "value": "110300"}, …… ]; var html = '请选择城市'; for (var i = 0; i < cityArray.length; i++) { if (cityArray[i].value.substring(0, 2) === provinceValue.substring(0, 2)) { html += '' + cityArray[i].name + ''; } } $('#city').html(html); } function renderDistrict(cityValue) { var districtArray = [ {"name": "区县1", "value": "110101"}, {"name": "区县2", "value": "110102"}, {"name": "区县3", "value": "110103"}, …… ]; var html = '请选择区域'; for (var i = 0; i < districtArray.length; i++) { if (districtArray[i].value.substring(0, 4) === cityValue.substring(0, 4)) { html += '' + districtArray[i].name + ''; } } $('#district').html(html); } renderProvince(); $('#province').change(function () { var provinceValue = $(this).val(); renderCity(provinceValue); renderDistrict(''); }); $('#city').change(function () { var cityValue = $(this).val(); renderDistrict(cityValue); });登录后复制三、实现效果 通过上述代码的实现,我们可以得到一个完整的省市区多选示例,如下图所示: 至此,我们就完成了省市区多选功能的实现。 总的来说,实现省市区多选功能并不难,只需要通过一些简单的代码操作,就可以将实现该功能。在实际的项目中,我们只需要根据具体的需求,来适当调整代码结构,就可以实现更加复杂和丰富的省市区多选功能。 以上就是javascript实现省市多选的详细内容,更多请关注php中文网其它相关文章! |
CopyRight 2018-2019 实验室设备网 版权所有 |