Distpicker provincial address three level linkage plug-in

Use and download address: http://www.jq22.com/jquery-info8054
1, Introduce distpicker.js distpicker.data.js
2, html structure initialization

<div data-toggle="distpicker" id="address">
   <select></select><!-- province -->
   <select></select><!-- city -->
   <select></select><!-- area/county -->
</div>

3, Modify the parameters of global discpicker

$.fn.distpicker.setDefaults({
    autoSelect: false,
    province: '----Choice Province ----',  //Modify the default text of the select box
    city: '---- Choice city ----',
    district: '---- Selection area/county ----'
});

4, Reset select box

$('#address').distpicker('reset');  //or
$('#address').distpicker('reset', true);
destroy()  //Destroy the plug-in instance.

5, Get the selected address code
The rule is: if all three are selected, only the code code of the third "district / county" will be returned; if only the first two are selected, only the code of the second "city" will be returned;
If only the first one is selected, only the code code of the first "province" will be returned

function addressChange(id){;
    var first=$('#'+id).find('select:first-child');   //Get select box
    var second=$('#'+id).find('select:first-child').next();
    var third=$('#'+id).find('select:last-child');
    //The above paragraph can also be changed to select:eq(0)

    var firstCode=first.find('option:selected').attr('data-code');  //Get the property value of the selected 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){   //If the third select is selected, return the value of the third
        code=thirdCode;
    }else{
        if(second.find('option:selected').index() != 0){  //If the second select is selected, return the value of the second
            code=secondCode;
        }else{
            code=firstCode;
        }
    };
    return code;//Return the final code
};

6, Edit or detail page echo operation according to code code

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

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

    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');
}

Keywords: JQuery

Added by GroundZeroStudios on Fri, 03 Jan 2020 23:40:20 +0200