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