成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

根據(jù)地址處理表單 省/市/區(qū) 數(shù)據(jù)的回顯

MiracleWong / 647人閱讀

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

我要處理的問題是，從請(qǐng)求中獲取到的 obj.data.address 數(shù)據(jù)依次回顯到三個(gè)分別代表省、市、區(qū) 的select標(biāo)簽中。但是我obj.data.address只有類似這樣的數(shù)據(jù) ("廣東省珠海市香洲區(qū)XX街道XX號(hào)")，我要怎么根據(jù)這個(gè)地址數(shù)據(jù)來修改這三個(gè)select的顯示的呢？

思路：使用用字符串的 startsWith方法
eg:
"廣東省珠海市香洲區(qū)XX街道XX號(hào)".startsWith("廣東省")返回true,省份select的值被確定,然后將 “廣東省” 從地址中刪除掉address.replace("廣東省", "").
"珠海市香洲區(qū)XX街道XX號(hào)".startsWith("珠海市")返回true,市區(qū)select的值被確定，同樣在address中刪掉已匹配到的結(jié)果.
"香洲區(qū)XX街道XX號(hào)".startsWith("香洲區(qū)")返回true,市區(qū)select的值被確定，同樣在address中刪掉已匹配到的結(jié)果.
現(xiàn)在 address中只剩下xxx街道xxx號(hào)，自然就是街道信息了，將它放在表示街道的表單域中.

// 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)
/* -- 市區(qū) -- */
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)

/* -- 縣區(qū) -- */
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)

上面的方式確實(shí)是能解決問題。雖然看起來清晰，處理（省、市、區(qū)）的代碼在哪一塊很分明，但看起來代碼上是有一些啰嗦了，而且鼠標(biāo)上下滾動(dòng)，這手也是挺累的哈。所以用下面這個(gè)版本避免代碼重復(fù)的問題。測(cè)試之后功能沒丟，心里極舒服。
但是萬一后面出現(xiàn)問題，覺得要調(diào)試這段代碼也是麻煩呢..

// 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月份.您好！兵哥哥們辛苦了，因?yàn)槟銈?，祖國才越來越?qiáng)大。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96522.html

相關(guān)文章

  • Angular 響應(yīng)式表單之表單分組

    摘要：跟蹤獨(dú)立表單控件的值和驗(yàn)證狀態(tài)。當(dāng)使用響應(yīng)式表單時(shí)，類是最基本的構(gòu)造塊。因此在查看單個(gè)表單是否有錯(cuò)誤信息時(shí)，必須先判斷是子組件還是孫子組件。方法檢查組內(nèi)是否有一個(gè)具有指定名字的已啟用的控件，存在返回，不存在返回。 1、案例需求 表單提交，表單全部校驗(yàn)成功才能提交，當(dāng)表單校驗(yàn)錯(cuò)誤，表單邊框變紅，同時(shí)有錯(cuò)誤提示信息，有重置功能 在線預(yù)覽 git倉庫 2、名詞解釋 在分析代碼之前，首先明...

    huaixiaoz 評(píng)論0 收藏0

  • Element中的Cascader（級(jí)聯(lián)列表）動(dòng)態(tài)加載省／市／區(qū)數(shù)據(jù)

    摘要：中的其實(shí)是有動(dòng)態(tài)加載次級(jí)選項(xiàng)的方法。方法的原理是利用址引用傳遞，動(dòng)態(tài)修改。其中找到究竟需要在那層添加數(shù)據(jù)就變成一個(gè)很麻煩的問題。 element中的cascader其實(shí)是有動(dòng)態(tài)加載次級(jí)選項(xiàng)的方法。方法的原理是利用址（引用）傳遞，動(dòng)態(tài)修改:options。 var c={name: bob} var d=c d.name = tom console.log(c) // {name: to...

    golden_hamster 評(píng)論0 收藏0

  • Element中的Cascader（級(jí)聯(lián)列表）動(dòng)態(tài)加載省／市／區(qū)數(shù)據(jù)

    摘要：中的其實(shí)是有動(dòng)態(tài)加載次級(jí)選項(xiàng)的方法。方法的原理是利用址引用傳遞，動(dòng)態(tài)修改。其中找到究竟需要在那層添加數(shù)據(jù)就變成一個(gè)很麻煩的問題。格式化數(shù)據(jù)格式返回清除方法 element中的cascader其實(shí)是有動(dòng)態(tài)加載次級(jí)選項(xiàng)的方法。方法的原理是利用址（引用）傳遞，動(dòng)態(tài)修改:options。 var c={name: bob} var d=c d.name = tom console.log(c)...

    JinB 評(píng)論0 收藏0

  • Element中的Cascader（級(jí)聯(lián)列表）動(dòng)態(tài)加載省／市／區(qū)數(shù)據(jù)

    摘要：中的其實(shí)是有動(dòng)態(tài)加載次級(jí)選項(xiàng)的方法。方法的原理是利用址引用傳遞，動(dòng)態(tài)修改。其中找到究竟需要在那層添加數(shù)據(jù)就變成一個(gè)很麻煩的問題。格式化數(shù)據(jù)格式返回清除方法 element中的cascader其實(shí)是有動(dòng)態(tài)加載次級(jí)選項(xiàng)的方法。方法的原理是利用址（引用）傳遞，動(dòng)態(tài)修改:options。 var c={name: bob} var d=c d.name = tom console.log(c)...

    fxp 評(píng)論0 收藏0

  • django項(xiàng)目admin后臺(tái)整合tinymce富文本編輯并自定義添加圖片本地上傳和富文本中的回顯

    摘要：選擇該頁面綁定的標(biāo)簽指定圖片上傳處理目錄注其中為了顯示為中文，標(biāo)明了中文，同時(shí)需要下載語言包放到對(duì)應(yīng)的文件夾下。 前言 我們常因?yàn)閐jango的自帶admin后臺(tái)功能而選擇該框架，但也因?yàn)槠渥詣?dòng)生成的特殊性而在做出特別的更改的時(shí)候束手束腳，鑒于項(xiàng)目已經(jīng)采用了django，而后臺(tái)要求能夠直接上傳富文本內(nèi)容直接用于網(wǎng)頁顯示，定制性高，后來翻了目前較為知名的幾款富文本編輯框，覺得還是tiny...

    HackerShell 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<