記錄一次使用jq實現3層地址聯動選擇流程！效果如圖。
需要引入 jq.js、layer.js、layui.js、layui.css (icon圖標)
二、選中后頁面展示效果
三、頁面展示HTML
<div class="content-info"> <p> <span class="tips-info">!</span> <span class="miniP"> 地區設置： <span class="child-content"> <button class="btn btn-primary btn-small" id="address">添加配送地區</button> </span> </span> </p> <table id="tblRules" style="display: none;"> <thead> <tr> <th>配送地區</th> <th>首件數（件）</th> <th>首件價格（元）</th> <th>續件數（件）</th> <th>續件價格（元）</th> <th>操作</th> </tr> </thead> <tbody id="tdata"> </tbody> </table> </div>
四、Model模態框彈層HTML
deliveryAreaList 是一個數組，數據格式如下：
{ "華東":{ "857":{ "name":"上海市", "city":[ { "id":"867", "city":"上海市", "province_id":857 } ] } } }
{#選擇提示#} <div id="prefectureModal" class="modal stock-modal hide fade" tabindex="-1" style="left: 41%; width: 60%;" role="dialog" aria-labelledby="skuStockInfoModal" role="dialog" aria-labelledby="dialogModal" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>選擇區域</h3> </div> <div class="modal-body"> <div class="dialog-modal-body"> <div> <ul class="parent-ul"> {% for deliveryAreaName, deliveryAreaInfo in deliveryAreaList %} {% if deliveryAreaInfo|length > 0 %} <li class="child-qu"> <div> <label><input type="checkbox" value="{{ deliveryAreaName }}" class="qu-name"> {{ deliveryAreaName }}</label></div> <ul class="child-ul"> {% for areaId, areaValue in deliveryAreaInfo %} <li> <input type="checkbox" id="area{{ areaId }}" class="bigarea" data-id="{{ areaId }}" data-name="{{ areaValue.name }}" value="{{areaId}}"> <label for="area{{ areaId }}" style="display: inherit;" class="area-name">{{ areaValue.name }} </label> <i class="layui-icon layui-icon-triangle-d city-list" data-province-id="{{areaId}}"></i> <ul class="city-ul" style="display:none"> {% for id, val in areaValue.city %} <li><input type="checkbox" class="bigcity" id="city{{val.id}}" data-id="{{val.id}}" data-name="{{val.city}}" value="{{val.id}}"> <label for="city{{val.id}}" style="display: inherit;" class="city-name">{{ val.city }} </label> </li> {% endfor %} </ul> </li> {% endfor %} </ul> </li> {% endif %} {% endfor %} </ul> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary btn-modal-update-stock saveAddress">保存</button> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> </div> </div>
五、CSS
.tab-content{ list-style: none; } .tab-content li { border: 1px solid #99999978; width: 200px; text-align: center; height: 40px; float: left; line-height: 40px; } .tab-content li a { text-decoration:none; cursor: pointer; display:block; overflow:hidden; line-height: 40px; color: #000; } .actives { /* #bcbcbc; */ background-color: #6aa6ed; } .tabs-cont { padding-top: 20px; } .cont-page { width: 94%; margin-bottom: 20px; } .cont-page .title { background-color: #c3d1f5ba; height: 34px; line-height: 34px; padding-left: 25px; font-size: small; font-weight: bold; } .cont-page .content { background-color: #f2f2f2; } .con-child { padding: 23px 0px 0px 40px; } .child-content{ padding-left: 10px; } .content-info { padding-bottom: 15px; } .tips{ color: red; font-size: small; } .tips-info { color: #f7f2f2; width: 11px; height: 18px; background-color: #ec0b0b; cursor: pointer; display: -webkit-inline-box; border-radius: 23px; text-align: center; padding-left: 7px; font-size: small; line-height: 19px; } .parent-ul .child-qu { list-style-type: none; } ul.child-ul { padding-left: 45px; } .child-ul li { list-style-type: none; display: inline; line-height: 40px; padding: 14px; position: relative; /*相對定位*/ } .parent-ul { padding: 20px 20px 20px 40px; } input[type="checkbox"] { /*/-webkit-appearance: none; !*清除復選框默認樣式*!*/ border: 0.5px solid #627BF6; vertical-align: middle; width: 15px; height: 15px; margin-top: -5px; margin-right: 0 !important; border-radius: 0; } input[type="checkbox"]:checked { /* background-position: -48px 0; */ background: #627BF6; /*復選框的背景圖*/ background-size: contain; } .child-qu ul li span, .city-list{ cursor:pointer } .activity{ position: absolute; left: 0; /*相對定位*/ z-index: 2; display: none; border: 2px solid #CAE4FF; background-color: #EDF6FF; width: 198px; padding: 10px; } #tblRules{ text-align: center; margin-top: 20px; width: 82%; } #tblRules th{ height:40px; background-color:#6aa6ed; border:1px solid #ccc; } #tblRules td{ background-color:#fff; height:45px; min-width:150px; border:1px solid #ccc; text-align: center; } .miniP { padding-left: 8px; }
六、JS （包含了整個頁面上的js，具體比較懶沒有抽出來)
var feeList = {{ feeList | raw }}; var addressInfo = {{ addressInfo | raw }}; var id = null; var Request = GetRequest(); if ( typeof Request['id'] == 'string' ) { id = Request['id']; } var _info = { main:function () { _info.init(); _info.selectedAddress(); //城市下拉框（控制城市的展示和標簽的動態切換） _info.quClick(); //選中區觸發事件（向下控制省和城市全選） _info.bigareaClick(); //選中省的觸發事件（向下控制城市全選，向上控制選中區） _info.cityClick(); //選中城市的觸發事件（控制選中，向上控制選中省） _info.deleteData(); //刪除臨時緩存中的數據 _info.clearHtml(); //清除彈層選中事件 _info.saveSelected(); //往緩存中插入選中事件 _info.checkedAddress = []; //臨時選中緩存 _info.sendAddressChange(); //發貨地址 _info.cancelAddressChange();//退貨地址 _info.saveTemple(); //保存運費模板 _info.id = id; //發貨物流地址 _info.deliveryProvinceId = 0; _info.deliveryCityId = 0; _info.districtId = 0; //退貨物流地址 _info.refundProvinceId = 0; _info.refundCityId = 0; _info.refundDistrictId = 0; //初始化數據 if ( feeList.length ) { _info.checkedAddress = feeList; _info.reviewHtml(_info.checkedAddress); } if ( typeof addressInfo == 'object' && _info.id ) { _info.deliveryProvinceId = addressInfo.delivery.delivery_province_id; _info.deliveryCityId = addressInfo.delivery.delivery_city_id; _info.districtId = addressInfo.delivery.delivery_district_id; _info.getCityList( _info.deliveryProvinceId, 1); _info.getCountyList( _info.deliveryCityId, 1); _info.refundProvinceId = addressInfo.refund.refund_province_id; _info.refundCityId = addressInfo.refund.refund_city_id; _info.refundDistrictId = addressInfo.refund.refund_district_id; _info.getCityList(_info.refundProvinceId, 0); _info.getCountyList(_info.refundCityId, 0); } }, init:function () { //物流公司初始化配置 $('.demo').fSelect({ placeholder: '請選擇物流公司', numDisplayed: 10, searchText: '搜索', showSearch: true }); //跳轉鏈接 $('.cancel').click(function () { window.location.href='/expresstemplate/index'; }); //選項卡 $(document).find('[data-toggle="tooltip"]').tooltip(); $(".tab-content ul li").click(function(){ $(this).addClass("actives").siblings().removeClass("actives"); }); //彈出提示 $(".tips-info").mouseover(function () { layer.tips( '平台規定以下地區必須進行商品配送:北京、上海、深圳、廣州', '.tips-info', { tips: [4, '#BAB758'], area: ['190px', 'auto'], time:2000 }); }); //地區選擇文字自動選中checkBox $('.child-qu ul li span').click(function () { if ($(this).prev()[0].checked) { $(this).prev('input').prop('checked', false) } else { $(this).prev('input').prop('checked', true) } }); //地址彈層 $('#address').click(function () { _info.disabledHtml(_info.checkedAddress); $('#prefectureModal').modal('show'); }) }, selectedAddress:function () { $('.city-list').click(function () { if ( $(this).parents().children('.city-ul').is(':hidden') ) { //消除所有父級孩子熱點 $('.parent-ul .child-qu').each(function () { $(this).children().find('.city-ul').removeClass('activity'); $(this).children().find('.city-ul').css('display', 'none'); $(this).children().find('.city-list').removeClass('layui-icon-triangle-r').addClass('layui-icon-triangle-d'); }); //開啟熱點 $(this).removeClass('layui-icon-triangle-d').addClass('layui-icon-triangle-r'); $(this).parents().children('.city-ul').css('display', 'block'); $(this).parents().children('.city-ul').addClass('activity'); } else { //關閉熱點 $(this).removeClass('layui-icon-triangle-r').addClass('layui-icon-triangle-d'); $(this).parents().children('.city-ul').css('display', 'none'); $(this).parents().children('.city-ul').removeClass('activity'); } }); }, quClick:function () { $('.qu-name').click(function () { if ($(this).is(':checked')) { $(this).parents().children('.child-ul').each(function () { $(this).find('.bigarea').prop("checked", true); $(this).children().find('.city-ul').each(function () { $(this).find('.bigcity').prop("checked", true); }) }) } else { $(this).parents().children('.child-ul').each(function () { $(this).find('.bigarea').prop("checked", false); $(this).children().find('.city-ul').each(function () { $(this).find('.bigcity').prop("checked", false); }) }) } }) }, bigareaClick:function() { $('.bigarea').click(function () { if ($(this).is(':checked')) { //在小父親下去找 parents 是大父親 $(this).parent().find('.city-ul').each(function () { $(this).find('.bigcity').prop("checked", true); }); //省選中時自動選中區 $(this).parent().parent().parent().find('.qu-name').prop('checked', true); } else { $(this).parent().find('.city-ul').each(function () { $(this).find('.bigcity').prop("checked", false); }); //省全都取消的時候取消區 var checkAreaHasCheck = false; $(this).parent().parent().each(function () { if ($(this).find('.bigarea').is(":checked")) { checkAreaHasCheck = true; } }); if ( !checkAreaHasCheck ) { $(this).parent().parent().parent().find('.qu-name').prop('checked', false); } } }) }, cityClick:function() { $('.bigcity').bind('click',function () { if ( $(this).is(':checked') ) { $(this).parent().parent().parent().find('.bigarea').prop("checked", true); $(this).parent().parent().parent().parent().parent().find('.qu-name').prop("checked", true); } else { //一級一級取消【省】市級全都取消的時候取消省 var checkCityHasCheck = false; $(this).parent().parent().each(function () { if ($(this).find('.bigcity').is(':checked')) { checkCityHasCheck = true; } }); if ( !checkCityHasCheck ) { $(this).parent().parent().parent().find('.bigarea').prop("checked", false); } //一級一級取消【區】市級全都取消的時候取消區 var checkQuHasCheck = false; $(this).parent().parent().parent().parent().each(function () { if ($(this).find('.bigarea').is(':checked')) { checkQuHasCheck = true; } }); if ( !checkQuHasCheck ) { $(this).parent().parent().parent().parent().parent().find('.qu-name').prop("checked", false); } } }); }, saveSelected:function () { $('.saveAddress').click(function () { var checked = _info.getChecked(); //儲存表格中的數據 if ( $("#tdata tr").length >1 ) { $("#tdata tr").each(function(key, val) { var firstPrice = $(this).children('td').children('.firstPrice').val(); var doublePrice = $(this).children('td').children('.doublePrice').val(); _info.checkedAddress[key].firstPrice = firstPrice; _info.checkedAddress[key].doublePrice = doublePrice; }); } if (_info.checkedAddress.length ) { checked.forEach(function (val, key) { _info.checkedAddress.push(val); }) } else { _info.checkedAddress = checked; } $('#prefectureModal').modal('hide'); _info.reviewHtml(_info.checkedAddress); }); }, reviewHtml:function(checked){ if (checked.length) { $('#tblRules').css('display', 'block'); $('#tdata').html(''); checked.forEach(function (val, key) { if ( val.city.length ) { var cityList = []; var cityName = ''; val.city.forEach(function (v, k) { cityList.push(v.name); }); //如果全選就展示省 if ( val.province.cityTotal == cityList.length ) { cityName = val.province.name; } else { cityName = cityList.join(','); } var _html = ' <tr>\n' + ' <td>'+ cityName +'</td>\n' + ' <td> <input type="text" value="1" disabled style="width: 84px;margin: 6px 0px 6px 0px;"> </td>\n' + ' <td> <input type="text" class="firstPrice" disabled value="'+val.firstPrice+'" maxlength="6" name="firstPrice" style="width: 84px; margin: 6px 0px 6px 0px;"> </td>\n' + ' <td> <input type="text" value="1" disabled style="width: 84px;margin: 6px 0px 6px 0px;"> </td>\n' + ' <td> <input type="text" class="doublePrice" disabled value="'+val.doublePrice+'" maxlength="6" name="doublePrice" style="width: 84px;margin: 6px 0px 6px 0px;"> </td>\n' + ' <td> <a href="javascript:;" style="color: red;" class="deleteData" data-key="'+key+'" data-province="'+ val.province.id +'">刪除</a></td>\n' + ' </tr>'; $('#tdata').append(_html); } }) } }, disabledHtml:function(checkedAddress) { var ul = $(".parent-ul"); ul.each(function (index, a) { //var qu = $(this).children().find(".qu-name"); var area = $(this).children().find('.child-ul'); area.each(function () { var quSelect = false; $(this).find('li').each(function(){ var areaId = $(this).find('.bigarea').attr('data-id'); var isSelect = false; checkedAddress.forEach(function (val, key) { if ( val.province.id == areaId ) { isSelect = true; } }); if ( isSelect ) { quSelect = true; $(this).find('.bigarea').prop('checked', true); $(this).find('.bigarea').attr('disabled', 'disabled'); } else { $(this).find('.bigarea').prop('checked', false); $(this).find('.bigarea').removeAttr('disabled'); } var city = $(this).find('.city-ul'); city.each(function () { $(this).find('li').each(function(){ var cityId = $(this).find('.bigcity').attr('data-id'); var isCitySelect = false; checkedAddress.forEach(function (val, key) { val.city.forEach(function (v, k) { if (v.id == cityId) { isCitySelect = true; } }); }); if ( isCitySelect ) { $(this).find('.bigcity').prop('checked', true); $(this).find('.bigcity').attr('disabled', 'disabled'); } else if ( !$(this).find('.bigcity').attr('disabled') ) { $(this).find('.bigcity').prop('checked', false); $(this).find('.bigcity').removeAttr('disabled'); } }) }); }); if ( quSelect ) { $(this).parent().find(".qu-name").prop('checked', true); $(this).parent().find(".qu-name").attr('disabled', 'disabled'); } else { $(this).parent().find(".qu-name").prop('checked', false); $(this).parent().find(".qu-name").removeAttr('disabled'); } }); }); }, deleteData:function() { //每次刪除都將頁面上的table表格 $(document).on('click', '.deleteData', function (e) { e.preventDefault(); var delKey = $(this).attr('data-key'); var newAddress = []; //儲存表格中的數據 var firstPrice = doublePrice = 0; $("#tdata tr ").each(function(key, val) { firstPrice = 0;//$(this).children('td').children('.firstPrice').val(); doublePrice = 0;//$(this).children('td').children('.doublePrice').val(); _info.checkedAddress[key].firstPrice = firstPrice; _info.checkedAddress[key].doublePrice = doublePrice; }); _info.checkedAddress.forEach(function (val, key) { if (key != delKey) { newAddress.push(_info.checkedAddress[key]) } }); _info.checkedAddress = newAddress; //如果有數據就重新渲染表格數據 if ( _info.checkedAddress.length ) { _info.reviewHtml(_info.checkedAddress); } else { $('#tblRules').css('display', 'none'); } //清除彈層選中事件 _info.clearHtml(); }) }, clearHtml:function() { var ul = $(".parent-ul"); ul.each(function (index, a) { var qu = $(this).children().find(".qu-name"); if (qu.is(':checked')) { qu.prop("checked", false); qu.removeAttr("disabled"); var area = $(this).children().find('.child-ul'); area.each(function () { $(this).find('li').each(function(){ if ($(this).find('.bigarea').is(':checked')) { $(this).find('.bigarea').prop("checked", false); $(this).find('.bigarea').removeAttr("disabled"); var city = $(this).find('.city-ul'); city.each(function () { $(this).find('li').each(function(){ if ($(this).find('.bigcity').is(':checked')) { $(this).find('.bigcity').prop("checked", false); $(this).find('.bigcity').removeAttr("disabled"); } }) }); } }); }); } }); }, getChecked:function () { var checked = []; var cityList = []; var provinceInfo = {}; var ul = $(".parent-ul"); ul.each(function (index, a) { var qu = $(this).children().find(".qu-name"); if (qu.is(':checked')) { var area = $(this).children().find('.child-ul'); area.each(function () { $(this).find('li').each(function(){ if ($(this).find('.bigarea').is(':checked')) { provinceInfo = { 'id' : $(this).find('.bigarea').attr('data-id'), 'name': $(this).find('.bigarea').attr("data-name"), 'cityTotal' : 0, }; cityList = []; var city = $(this).find('.city-ul'); var cityTotal = 0; city.each(function () { $(this).find('li').each(function(){ ++cityTotal; if ($(this).find('.bigcity').is(':checked') && !$(this).find('.bigcity').attr('disabled')) { cityList.push({ 'id' : $(this).find('.bigcity').attr('data-id'), 'name': $(this).find('.bigcity').attr("data-name"), }); } }) }); provinceInfo.cityTotal = cityTotal; if ( cityList.length ) { checked.push({ 'province' : provinceInfo, 'city' : cityList, 'firstPrice': '0.00', //記錄輸入首件價格 'doublePrice': '0.00', //記錄輸入續件價格 'firstNum' : 1, 'doubleNum': 1, }); } } }); }) } }); return checked; }, sendAddressChange:function () { $('#select-province-fa').change(function () { var provinceId = $('select[name="provinceSend"]').find("option:selected").val(); _info.getCityList(provinceId, 1); }); $('#select-city-fa').change(function () { var cityId = $('select[name="citySend"]').find("option:selected").val(); _info.getCountyList(cityId, 1); }); }, cancelAddressChange:function () { $('#select-province-cancel').change(function () { var provinceId = $('select[name="provinceCancel"]').find("option:selected").val(); _info.getCityList(provinceId, 0); }); $('#select-city-cancel').change(function () { var cityId = $('select[name="cityCancel"]').find("option:selected").val(); _info.getCountyList(cityId, 0); }); }, getCityList:function (provinceId, type) { $.ajax({ url: "/nation/citylist", type: "GET", async: false, data: { provinceId: provinceId } }).done(function(response) { var w = $.parseJSON( response ); var html = '<option value="">城市</option>'; for( var i = 0; i < w.length; i ++ ) { var cityInfo = w[i]; var selected = ''; if ( type ) { if( cityInfo.id == _info.deliveryCityId ) { selected = 'selected'; } } else { if( cityInfo.id == _info.refundCityId ) { selected = 'selected'; } } html += '<option value="' + cityInfo.id + '" '+selected+' >' + cityInfo.city + '</option>'; } if ( type ) { $('select#select-city-fa').html( html ); } else { $('select#select-city-cancel').html( html ); } }).fail(function () { return false; }); }, getCountyList:function (cityId, type) { $.ajax({ url: "/nation/districtlist", type: "GET", async: false, data: { cityId: cityId } }).done(function(response) { var w = $.parseJSON( response ); var html = '<option value="">區縣</option>'; for( var i = 0; i < w.length; i ++ ) { var districtInfo = w[i]; var selected = ''; if ( type ) { if( districtInfo.id == _info.districtId ) { selected = 'selected'; } } else { if( districtInfo.id == _info.refundDistrictId ) { selected = 'selected'; } } html += '<option value="' + districtInfo.id + '" '+selected+' >' + districtInfo.district + '</option>'; } if ( type ) { $('select#select-district-fa').html( html ); } else { $('select#select-district-cancel').html( html ); } return false; }).fail(function () { return false; }); }, saveTemple:function () { $('.saveTemple').click(function () { /*模版基礎信息*/ var tplName = $('input[name="tplName"]').val().trim();//模板名稱 var tplStatus = $('select[name="tplStatus"]').find("option:selected").val();//啟用1 禁用0 if ( !tplName ) { layer.alert('模板名稱不能為空', {icon: 0,skin: 'layer-ext-moon'}); return false; } /*運費設置-配送地區*/ var tplType = $('input[name="tplType"]').val();//運費類型 按件計費 var checkedAddress = _info.checkedAddress; var deliveryFeeList = []; if ( !checkedAddress.length ) { layer.alert('地區設置不能為空.', {icon: 0,skin: 'layer-ext-moon'}); return false; } var priceData = []; var firstPrice = doublePrice = 0; var priceReg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/; try { $("#tdata tr ").each(function(){ firstPrice = $(this).children('td').children('.firstPrice').val(); doublePrice = $(this).children('td').children('.doublePrice').val(); if ( firstPrice ) { if ( !priceReg.test(firstPrice) ){ throw new Error('請輸入正確的運費模板價格,整數或保留兩位小數'); } } else if (doublePrice) { if ( !priceReg.test(doublePrice) ){ throw new Error('請輸入正確的運費模板價格,整數或保留兩位小數'); } } firstPrice = firstPrice ? parseFloat(firstPrice).toFixed(2) : 0; doublePrice = doublePrice ? parseFloat(doublePrice).toFixed(2) : 0; if ( doublePrice*100 > firstPrice*100 ) { throw new Error('地區設置：續件價格不能大於首件價格'); } if ( doublePrice> 9999 || firstPrice > 9999) { throw new Error('地區設置：首件和續件價格最大不能大於9999元'); } priceData.push({ 'firstPrice' : firstPrice, 'doublePrice' : doublePrice, }); }); } catch (e) { layer.alert(e.message, {icon: 0,skin: 'layer-ext-moon'}); throw e } if ( priceData.length ) { checkedAddress.forEach(function (val, key) { var cityIds = []; val.city.forEach(function (v, k) { cityIds.push(v.id) }); deliveryFeeList.push({ "provinceId": val.province.id, "cityIds": cityIds.join(','), "startNum": 1, "startFee": parseInt( priceData[key]['firstPrice']*100 ), "incrementNum": 1, "incrementFee": parseInt( priceData[key]['doublePrice']*100 ), }) }); } /*發貨地信息*/ var deliveryContacter = $('input[name="deliveryContacter"]').val().trim(); //發貨聯系人 var deliveryProvinceId = $('select[name="provinceSend"]').find("option:selected").val(); //發貨地區-省 var deliveryCityId = $('select[name="citySend"]').find("option:selected").val(); var deliveryDistrictId = $('select[name="districtSend"]').find("option:selected").val(); var deliveryDetail = $('textarea[name="deliveryDetail"]').val().trim(); //發貨地區-發貨詳情地址 var deliveryTelZone = $('input[name="delivery_tel_zone"]').val().trim();//發貨地區-座機號碼 var deliveryTelNumber = $('input[name="delivery_tel_number"]').val().trim(); var deliveryTelExt = $('input[name="delivery_tel_ext"]').val().trim(); var deliveryMobile = $('input[name="deliveryMobile"]').val().trim(); //發貨地區-手機號碼 var deliveryTel = '';//發貨電話號碼，手機電話二選一 if ( !deliveryContacter ) { layer.alert('發貨聯系人必填', {icon: 0,skin: 'layer-ext-moon' }); return false; } if ( !deliveryProvinceId || !deliveryCityId || !deliveryDistrictId) { layer.alert('發貨地區必填', {icon: 0,skin: 'layer-ext-moon'}); return false; } if ( !deliveryDetail ) { layer.alert('發貨詳情必填', {icon: 0,skin: 'layer-ext-moon' }); return false; } if ( deliveryTelZone && deliveryTelNumber) { var a = /0\d{2,6}-\d{7,9}/; deliveryTel = deliveryTelZone + '-' + deliveryTelNumber; if ( !a.test(deliveryTel) ) { layer.alert('發貨座機號碼格式有誤，請重填', {icon: 0,skin: 'layer-ext-moon'}); return false; } if ( deliveryTelExt ) { deliveryTel += '-' + deliveryTelExt; } } if ( deliveryMobile ) { if(!(/^1[3456789]\d{9}$/.test(deliveryMobile))){ layer.alert('發貨手機號碼格式有誤，請重填', {icon: 0,skin: 'layer-ext-moon'}); return false; } } if ( !deliveryMobile && !deliveryTel ) { layer.alert('發貨電話號碼或手機號碼必填二選一', { icon: 0, skin: 'layer-ext-moon'}); return false; } var ways = []; $('.fs-optgroup>.fs-option').each(function (val, key) { if ( $(this).hasClass('selected') ) { ways.push( $(this).attr('data-value')); } }); if ( !ways.length ) { layer.alert('發貨快遞公司必填', { icon: 0, skin: 'layer-ext-moon'}); return false; } var expressWays = ways.join(','); //快遞公司 /*退貨地信息*/ var refundContacter = $('input[name="refundContacter"]').val().trim(); //退貨聯系人 var refundProvinceId = $('select[name="provinceCancel"]').find("option:selected").val(); //退貨地區-省 var refundCityId = $('select[name="cityCancel"]').find("option:selected").val(); var refundDistrictId = $('select[name="districtCancel"]').find("option:selected").val(); var refundDetail = $('textarea[name="refundDetail"]').val().trim(); //退貨地區-發貨詳情地址 var refundTelZone = $('input[name="refund_tel_zone"]').val().trim();//退貨地區-座機號碼 var refundTelNumber = $('input[name="refund_tel_number"]').val().trim(); var refundTelExt = $('input[name="refund_tel_ext"]').val().trim(); var refundMobile = $('input[name="refundMobile"]').val().trim(); //退貨地區-手機號碼 var refundTel = '';//發貨電話號碼，手機電話二選一 if ( !refundContacter ) { layer.alert('退貨聯系人必填', {icon: 0,skin: 'layer-ext-moon' }); return false; } if ( !refundProvinceId || !refundCityId || !refundDistrictId) { layer.alert('退貨地區必填', {icon: 0,skin: 'layer-ext-moon'}); return false; } if ( !refundDetail ) { layer.alert('退貨詳情必填', {icon: 0,skin: 'layer-ext-moon' }); return false; } if ( refundTelZone && refundTelNumber) { var a = /0\d{2,6}-\d{7,9}/; refundTel = refundTelZone + '-' + refundTelNumber; if ( !a.test(refundTel) ) { layer.alert('退貨座機號碼格式有誤，請重填', {icon: 0,skin: 'layer-ext-moon'}); return false; } if ( refundTelExt ) { refundTel += '-' + refundTelExt; } } if ( refundMobile ) { if(!(/^1[3456789]\d{9}$/.test(refundMobile))){ layer.alert('退貨手機號碼格式有誤，請重填', {icon: 0,skin: 'layer-ext-moon'}); return false; } } if ( !refundMobile && !refundTel ) { layer.alert('退貨電話號碼或手機號碼必填二選一', { icon: 0, skin: 'layer-ext-moon'}); return false; } var params = { id : _info.id, tplName : tplName, tplStatus : tplStatus, deliveryContacter : deliveryContacter, deliveryProvinceId : deliveryProvinceId, deliveryCityId: deliveryCityId, deliveryDistrictId : deliveryDistrictId, deliveryDetail : deliveryDetail, deliveryTel : deliveryTel, deliveryMobile : deliveryMobile, expressWays : expressWays, refundContacter : refundContacter, refundMobile : refundMobile, refundTel : refundTel, refundProvinceId : refundProvinceId, refundCityId : refundCityId, refundDistrictId : refundDistrictId, refundDetail : refundDetail, tplType : tplType, deliveryFeeList : JSON.stringify(deliveryFeeList), }; if ( _info.id ) { layer.confirm('對應的商品運費模版將被更新，請確認操作!', { btn: ['操作','取消'] //按鈕 }, function(key){ layer.close(key); _info.saveData(params); }, function(){ }); } else { _info.saveData(params); } }); }, saveData:function ( params ) { var index = ''; $.ajax({ type: "post", url: "/expresstemplate/save", data: params, dataType: "json", beforeSend:function(){ index = parent.layer.load(); }, success:function(e){ if(e.errno==0) { layer.msg('操作成功', {icon: 1}); layer.confirm('已操作成功，跳轉到列表頁面嗎？', { btn: ['跳轉','留下'] //按鈕 }, function(){ window.location.href='/expresstemplate/index' }, function(){ }); }else{ layer.msg(e.errmsg, {icon: 2}); return false; } }, complete: function() { layer.close(index); }, error:function(){ layer.alert('系統錯誤', { icon: 5, skin: 'layer-ext-moon'}); } }); }, }; $(function () { _info.main(); }); //獲取url中"?"符后的字串 function GetRequest() { var url = location.search; var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for(var i = 0; i < strs.length; i ++) { theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]); } } return theRequest; }