根據地址處理表單省/市/區數據的回顯

MiracleWong 發布于2019-08-23 10:37 / 615人閱讀

摘要：我要處理的問題是，從請求中獲取到的數據依次回顯到三個分別代表省市區的標簽中。雖然看起來清晰，處理省市區的代碼在哪一塊很分明，但看起來代碼上是有一些啰嗦了，而且鼠標上下滾動，這手也是挺累的哈。所以用下面這個版本避免代碼重復的問題。

我要處理的問題是，從請求中獲取到的 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的回源地址有哪些

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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