jQuery 绑定 select 联动 手动触发

新增数据的时候，可以进行$('#id').change(function(e)监听分级的select ，然后分别赋值，在一级改变的时候，记得联动清除二三级的结果重新查询；

在编辑数据的时候，需要从数据库查询出来每一级的value值，这时候需要赋值给对应的select，但是赋值的过程中，$('#id').change(function(e)事件是不会自动触发的，此时，在为一级赋value值后，手动加上一个$('#id').change();空的触发change事件，这样，联动效果就可以继续了，记得是在每一个联动id后面加上一个哦；

代码如下：

//用户首选选择自动加载的洲际列表---》触发远程获取国家列表，选择国家---》远程获取省份列表，选择省份----》远程获取城市列表，选择城市//总共四个select选择框，其中手动触发、被动加载的是后面三个，故只用三个change()根据前一级的变化，加载后一级的数据即可//continent选择洲际//country选择国家//province选择省份//前三部分代码，分别对手动触发的三种情况进行了获取数据并加载，需要注意的是，例如选择的洲际发生变化，则国家重新加载，省份和城市全部填充为空//第四部分解决的问题，就是上面提到的，在新增数据时，因为所有的数据都为空，需要重新操作，所以change()的触发是必然的，但是在新增保存后，再次编辑时，数据是存在的，例如我之前的数据是：亚洲、中国、广东、深圳，这个数据应该是在一开始直接就加载过来的，但是过来的数据因为只存储了value和text，就是如果用户想要修改深圳为广州时，下拉列表只有深圳的情况，所以就需要我们在加载页面的时候，就将每个select选择框的下拉事件挨个儿触发一遍，即自动加载洲际的value的时候，触发$('#continent').change()的事件，便会调用已有方法$('#continent').change(function(e){}，自动加载全部该洲际下面的国家，再根据获取的国家value加载国家的text，以此类推，便可以加载所有相关数据。//第一部分$('#continent').change(function(e) {var values = $(this).val();$.ajax({url:'http://**/countries/'+values,type:'GET',async: false,dataType:'json',success:function(result){if(result.code==100){var _fullinfo = "<option value=\"0\">请选择<\/option>";$.each(result.data, function(i, thread) {_fullinfo+='<option value=\"'+thread.id+'\">'+thread.name+'<\/option>';})$('#country').html(_fullinfo);$('#province').html("<option value=\"0\">请选择<\/option>");$('#city').html("<option value=\"0\">请选择<\/option>");}},error: function(){}})});//第二部分$('#country').change(function(e) {var values = $(this).val();$.ajax({url:'http://**/provinces/'+values,type:'GET',async: false,dataType:'json',success:function(result){if(result.code==100){var _fullinfo = "<option value=\"0\">请选择<\/option>";$.each(result.data, function(i, thread) {_fullinfo+='<option value=\"'+thread.id+'\">'+thread.name+'<\/option>';})$('#province').html(_fullinfo);$('#city').html("<option value=\"0\">请选择<\/option>");}},error: function(){}})});//第三部分$('#province').change(function(e) {var values = $(this).val();$.ajax({url:'http://**/cities/'+values,type:'GET',async: false,dataType:'json',success:function(result){if(result.code==100){var _fullinfo = "<option value=\"0\">请选择<\/option>";$.each(result.data, function(i, thread) {_fullinfo+='<option value=\"'+thread.id+'\">'+thread.name+'<\/option>';})$('#city').html(_fullinfo);}},error: function(){}})});//第四部分$('#continent').val(data.data.continent);if($('#continent').val != '0')$('#continent').change();$('#country').val(data.data.country);if($('#country').val != 0)$('#country').change();$('#province').val(data.data.province);if($('#province').val != 0)$('#province').change();$('#city').val(data.data.city);