根据地址处理表单省/市/区数据的回显

MiracleWong 发布于2019-08-23 10:37 / 617人阅读

摘要：我要处理的问题是，从请求中获取到的数据依次回显到三个分别代表省市区的标签中。虽然看起来清晰，处理省市区的代码在哪一块很分明，但看起来代码上是有一些啰嗦了，而且鼠标上下滚动，这手也是挺累的哈。所以用下面这个版本避免代码重复的问题。

我要处理的问题是，从请求中获取到的 obj.data.address 数据依次回显到三个分别代表省、市、区的select标签中。但是我obj.data.address只有类似这样的数据 ("广东省珠海市香洲区XX街道XX号")，我要怎么根据这个地址数据来修改这三个select的显示的呢？

思路：使用用字符串的 startsWith方法
eg:
"广东省珠海市香洲区XX街道XX号".startsWith("广东省")返回true,省份select的值被确定,然后将 “广东省” 从地址中删除掉address.replace("广东省", "").
"珠海市香洲区XX街道XX号".startsWith("珠海市")返回true,市区select的值被确定，同样在address中删掉已匹配到的结果.
"香洲区XX街道XX号".startsWith("香洲区")返回true,市区select的值被确定，同样在address中删掉已匹配到的结果.
现在 address中只剩下xxx街道xxx号，自然就是街道信息了，将它放在表示街道的表单域中.

// address
let address = obj.data.address;
/* -- 省份 -- */
var proviceNodeList = document.querySelectorAll("#province option")
let province = Array.from(proviceNodeList).filter(ele => {
    return address.startsWith( ele.value ) && ele.value != ""
})[0];
$("#province").val(province = (province==undefined ? "" : province.value)).change();

address = address.replace(province, "");
//console.log(province + "替换后", address)
/* -- 市区 -- */
var cityNodeList = document.querySelectorAll("#city option")
let city = Array.from(cityNodeList).filter(ele => {
    return address.startsWith( ele.value ) && ele.value != ""
})[0];
$("#city").val(city = (city==undefined ? "" : city.value)).change();
address = address.replace(city, "");
//console.log(city + "替换后", address)

/* -- 县区 -- */
var countyNodeList = document.querySelectorAll("#county option")
let county = Array.from(countyNodeList).filter(ele => {
    return address.startsWith( ele.value ) && ele.value != ""
})[0];
$("#county").val(county = (county==undefined ? "" : county.value)).change();
address = address.replace(county, "");
//console.log(county + "替换后", address)
/* 街道 */
$("#street").val(address)

上面的方式确实是能解决问题。虽然看起来清晰，处理（省、市、区）的代码在哪一块很分明，但看起来代码上是有一些啰嗦了，而且鼠标上下滚动，这手也是挺累的哈。所以用下面这个版本避免代码重复的问题。测试之后功能没丢，心里极舒服。
但是万一后面出现问题，觉得要调试这段代码也是麻烦呢..

// address
let address = obj.data.address;
["province", "city", "county"].map(el => {
    var nodeList = document.querySelectorAll("#"+ el +" option")
    let option = Array.from(nodeList).filter(ele => {
        return address.startsWith( ele.value ) && ele.value != ""
    })[0];
    $("#" + el).val(option = (option==undefined ? "" : option.value)).change();
    address = address.replace(option, "");
})
// 街道
$("#street").val(address)

最后，8月份.您好！兵哥哥们辛苦了，因为你们，祖国才越来越强大。

GPU云服务器云服务器 html省市 js表单数据回显 waf的回源地址 cdn的回源地址有哪些

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96522.html

Angular 响应式表单之表单分组

摘要：跟踪独立表单控件的值和验证状态。当使用响应式表单时，类是最基本的构造块。因此在查看单个表单是否有错误信息时，必须先判断是子组件还是孙子组件。方法检查组内是否有一个具有指定名字的已启用的控件，存在返回，不存在返回。 1、案例需求表单提交，表单全部校验成功才能提交，当表单校验错误，表单边框变红，同时有错误提示信息，有重置功能在线预览 git仓库 2、名词解释在分析代码之前，首先明...

huaixiaoz 2019-08-23 15:24 评论0 收藏0
Element中的Cascader（级联列表）动态加载省／市／区数据

摘要：中的其实是有动态加载次级选项的方法。方法的原理是利用址引用传递，动态修改。其中找到究竟需要在那层添加数据就变成一个很麻烦的问题。 element中的cascader其实是有动态加载次级选项的方法。方法的原理是利用址（引用）传递，动态修改:options。 var c={name: bob} var d=c d.name = tom console.log(c) // {name: to...

golden_hamster 2019-08-02 16:08 评论0 收藏0
Element中的Cascader（级联列表）动态加载省／市／区数据

摘要：中的其实是有动态加载次级选项的方法。方法的原理是利用址引用传递，动态修改。其中找到究竟需要在那层添加数据就变成一个很麻烦的问题。格式化数据格式返回清除方法 element中的cascader其实是有动态加载次级选项的方法。方法的原理是利用址（引用）传递，动态修改:options。 var c={name: bob} var d=c d.name = tom console.log(c)...

JinB 2019-08-23 16:25 评论0 收藏0
Element中的Cascader（级联列表）动态加载省／市／区数据

摘要：中的其实是有动态加载次级选项的方法。方法的原理是利用址引用传递，动态修改。其中找到究竟需要在那层添加数据就变成一个很麻烦的问题。格式化数据格式返回清除方法 element中的cascader其实是有动态加载次级选项的方法。方法的原理是利用址（引用）传递，动态修改:options。 var c={name: bob} var d=c d.name = tom console.log(c)...

fxp 2019-08-30 15:43 评论0 收藏0
django项目admin后台整合tinymce富文本编辑并自定义添加图片本地上传和富文本中的回显

摘要：选择该页面绑定的标签指定图片上传处理目录注其中为了显示为中文，标明了中文，同时需要下载语言包放到对应的文件夹下。前言我们常因为django的自带admin后台功能而选择该框架，但也因为其自动生成的特殊性而在做出特别的更改的时候束手束脚，鉴于项目已经采用了django，而后台要求能够直接上传富文本内容直接用于网页显示，定制性高，后来翻了目前较为知名的几款富文本编辑框，觉得还是tiny...

HackerShell 2019-08-21 17:29 评论0 收藏0