js地址，居住地，戶口，職業，行業多選實現

公司甩給我一個需求，其中一部分是對省市區地址多選，研究了一下午，發現一個已經寫好的js能夠使用，

遂研究改js的邏輯與代碼，下面貼的是最第一版本的js，仍有部分不符合需求，因此還有2.0版本的省市區多選，

 

經過對應的省市區js，職能js，行業js

需求是根據點擊一個按鈕 實現動態添加數據，因此每一個數據都有一個地址多選

 主要邏輯：

　　點擊「添加規則」，出發點擊事件 addRuleHTML()，進入 function addRuleHTML(){}方法，添加點擊次數個行，

點擊「請選擇地區」，進入city_func.js裏面的jobAreaSelect(index，value)方法，index爲行下表，value爲改行默認地址爲0，

進入jobAreaSelect方法後，根據第一次點擊「請選擇地區」時的value值爲0，清空city_func.js裏面的公共數組jobArea_Arr，

若是是第一次進入，就把jobArea_Arr清空，就沒有勾選上的地址，若是不是第一次進入，則把value 經過 jobArea_Arr = value .split(",")

賦值給jobArea_Arr ，點擊保存時，將選擇的市區號保存到對應的行的隱藏到$('#jobAreaID'+index).val().

<input type="button" id="templateName" name="postage.templateName" value="添加規則" onclick="addRuleHTML()" />

// 添加規則
function addRuleHTML(){
         var $table1 = $("#table1");
         var Index = $(".imgs").length;
         $("#ruleName").show();
         var trHtml = "<tr class='imgs' id='add_"+ Index +"' >";
         trHtml+= "<th > <input type='text' name='postaddList["+Index+"].templateNo'   maxlength='9' style='text-align: right;width: 50px;'/></th>";
         trHtml+= "<td align='left' colspan='3'>";
         trHtml+= "    <input type='text' id='postageAdd"+Index+".defaultRulesA' name='postaddList["+Index+"].defaultRulesA'  maxlength='9' style='width: 50px !important;'/>&nbsp;&nbsp;&nbsp;";
         trHtml+= "    <input type='text' id='postageAdd"+Index+".defaultRulesB' name='postaddList["+Index+"].defaultRulesB'  maxlength='150' style='width:50px;'/> &nbsp;&nbsp;&nbsp; ";
         trHtml+= "    <input type='text' id='postageAdd"+Index+".defaultRulesC' name='postaddList["+Index+"].defaultRulesC'  maxlength='9' style='width: 50px !important;' />&nbsp;&nbsp;&nbsp;";
         trHtml+= "    <input type='text' id='postageAdd"+Index+".defaultRulesD' name='postaddList["+Index+"].defaultRulesD'  maxlength='9' style='width: 50px !important;' />&nbsp;";
         trHtml+= "    <input id='jobAreaID"+Index+"' type='hidden'  name='postaddList["+Index+"].placeTo' value='0' />";
         trHtml+= "  <input id='btn_jobArea"+Index+"' type='button' value='請選擇地區'  onclick='jobAreaSelect("+Index+",$(jobAreaID"+Index+").val())' />";
         trHtml+= "<a  href='javascript:;' class='opt_links deletopt' onclick='javascript:deleteProductImage("+Index+");'>刪除</a> </td> </tr></tr>";
        $table1.append(trHtml);
        } 

function jobAreaSelect(index,string){
    var dragHtml ='<div id="jobAreaAlpha">';        　　　　//地區
        dragHtml+='        <dl id="jobAreSelected"><dt>已選地點：</dt><dd></dd></dl>';
        dragHtml+='        <div id="maincity2"></div>';　　//主要城市
        dragHtml+='        <div id="allProv2"></div>';   　//全部省市
        dragHtml+='</div>';
        
        if(string == 0){
            jobArea_Arr.splice(0,jobArea_Arr.length);            //根據string，判斷是否第一次點擊添加地址，js清空數組數據
        }else{
            jobArea_Arr = string.split(",");
        }
        
    $('#drag_h').html('<b>請選擇地區（您最多能選擇5項）</b><span onclick="jobArea.confirm('+index+')">肯定</span>');
    $('#drag_con').html(dragHtml);

    jobArea.Show();//前端全棧學習交流圈：866109386
    boxAlpha();//面向1-3年前端開發人員
    draglayer();//幫助突破技術瓶頸，提高思惟能力。
}
var jobArea = {
    // 肯定
    confirm : function(index){
        var areaStr='';
        for(var i in jobArea_Arr){
            areaStr+=','+ja[jobArea_Arr[i]];
        }
        areaStr=areaStr.substring(1)?areaStr.substring(1):'請選擇地區'; 
        $('#btn_jobArea'+index).val(areaStr);
        $('#jobAreaID'+index).val(jobArea_Arr);　　　　　　// 點擊肯定時，保存的省市區號 默認是隱藏的
        boxAlpha();
        $('#jobAreSelected dd').empty();
    }
}

趁還年輕,還有激情,要在有限的時間和激情裏實現自我價值.