Distpicker 시내 주소 3 급 연동 플러그 인

사용 및 다운로드 주소:http://www.jq22.com/jquery-info8054 1. Distpicker. js Distpicker. data. js 도입 2. html 구조 초기 화

<div data-toggle="distpicker" id="address">
   <select>select>
   <select>select>
   <select>select>
div>

3. 전역 Distpicker 의 매개 변 수 를 수정 합 니 다.

$.fn.distpicker.setDefaults({
    autoSelect: false,
    province: '----    ----',  //  select     
    city: '----     ----',
    district: '----    /  ----'
});

4. select 상자 초기 화

$(‘#address’).distpicker('reset');  // 
$(‘#address’).distpicker('reset', true);
destroy()  //      。

5. 선 택 된 주소 코드 를 가 져 오 는 규칙 은 다음 과 같 습 니 다. 만약 에 세 번 째 가 모두 선택 되면 세 번 째 '구 / 현' 의 코드 만 되 돌려 주 고 앞의 두 번 째 만 선택 되면 두 번 째 '시' 의 코드 만 되 돌려 주 며 첫 번 째 만 선택 되면 첫 번 째 '성' 의 코드 만 되 돌려 줍 니 다.

function addressChange(id){;
    var first=$('#'+id).find('select:first-child');   //  select 
    var second=$('#'+id).find('select:first-child').next();
    var third=$('#'+id).find('select:last-child');
    //         select:eq(0)    

    var firstCode=first.find('option:selected').attr('data-code');  //      option    
    var secondCode=second.find('option:selected').attr('data-code');
    var thirdCode=third.find('option:selected').attr('data-code');

    var code="";
    if(third.find('option:selected').index() != 0){   //   3 select   ,   3   
        code=thirdCode;
    }else{
        if(second.find('option:selected').index() != 0){  //   2 select   ,   2   
            code=secondCode;
        }else{
            code=firstCode;
        }
    };
    return code;//       code 
};

6. 편집 또는 상세 페이지 는 코드 코드 에 따라 리 셋 작업 을 한다.

function address(editId,code){
    var first=$('#'+editId).find('select:first-child');   //  select 
    var second=$('#'+editId).find('select:first-child').next();
    var third=$('#'+editId).find('select:last-child');

    var province = code.substr(0,2)+'0000';  // 
    var city = code.substr(0,4)+'00';   // 
    var district = code.substr(0,6);   // / 

    first.find('option[data-code="'+province+'"]').attr("selected","selected").trigger('change');
    second.find('option[data-code="'+city+'"]').attr("selected","selected").trigger('change');
    third.find('option[data-code="'+district+'"]').attr("selected","selected").trigger('change');
}