三级联动下拉选+调用

自己在用联动下拉选的时候出现的问题及解决思路。

以省市县联动为例：

思路：页面初始化加载省级下拉选，在选择省级下拉选时触发jQuery的选中事件从而调用请求市级下拉选的方法。

html代码片段（采用的时bootstrap框架）：

<div class="form-group">    <label>所属省份:</label>    <select id="ddlProvinceId" class="form-control">        <option value="">--请选择--</option>    </select></div><div class="form-group">    <label>所属地市:</label>    <select id="ddlCityId" class="form-control">        <option value="">--请选择--</option>    </select></div><div class="form-group">    <label>所属区县:</label>    <select id="ddlDistrictCountyId" class="form-control">        <option value="">--请选择--</option>    </select></div>

页面显示就是这个样子了。

下面时请求的js代码：

省份加载。

function selectProvince(){    $('#province').html('');//清掉最开始省份下拉选中的值。    var str = '<option value="">--请选择--</option>';// 初始化一个option容器，装载数据加载完成以后的option.    // 进行ajax请求。    $.ajax({         url:'请求路径',         type:'GET',         dataType:'json',         success:function(data){             $(data).each(function(i){                 str += '<option value="' + data.value + '">' + data.text + '</option>' // 请求成功后根据数据格式把value和text存放到声明的str中。             });             $('#province').html(str); // 把数据加载到省份下拉选中         }    });}

城市加载。

function selectCity(){    var provinceId = $('province').val();// 获取选择的省份的value值。    $('city').html('');// 清空city的初始值。    var str = '<option value="">--请选择--</option>';    $.ajax({        url:'请求路径',        type:'GET',        dataType:'json',        data:{provinceId:provinceId},        success:function(data){            $(data).each(function(i){                str += '<option value="' + data.value + '">' + data.text + '</option>'            });                $('#city').html(str);
                $('#city').find('option[value= '+ cityId +']').attr('selected','true');//在编辑功能加载完成并且成功调用selectCity函数后，这句话就是通过value的方式找到对应的值并且选中。
 cityId = '';// 在选择完以后清空编辑带来的值，目的是在选择其他省份调用selectCity时，下拉选会选中‘请选择’选项，而不是编辑赋的cityId。
 }; });}

区县加载。
function districtCounty(){    var cityId = $('#city').val();    $('districtCounty').tml('');    var str = '<option value="">--请选择--</option>';    $.ajax({        url:'请求路径',        type:'GET',        dataType:'json',        data:{cityId:cityId},        success:function(data){            $(data).each(function(i){                str += '<option value="' + data.value + '">' + data.text + '</option>'            });            $('#districtCounty').vhtml(str);            $('#districtCounty').find('option[value='+ districtCountyId +']').attr('selected','true'); // 作用和请求城市一致。            districtCountyId = ''       }    });}

调用方法。
$(function(){    province();// 请求省份，加载下拉选。    $('province').change(function(){        if($('#province').val() != ''){            selectCity();        }else{            $('#city').html('<option value=''>--请选择--</option>');            $('#districtCounty').html('<option value=''>--请选择--</option>');        }    });    $('#city').change(function(){        if($('city').val() != ''){            selectDistrictCounty();        }else{            $('#districtCounty').html('<option value="">--请选择--</option>')        }    });});/*这段代码就是先加载省份下拉选，然后在省份进行选择的时候，通过“change”的方法触发js的选择事件，如果选择的值不为空，即不是请选择，加载城市下拉选，加载区县下拉选。如果是请选择，就把城市，区县的下拉选内的值替换为请选择*/

上面的代码完成了省市县的联动选择。而我所做的项目中，还有编辑功能，在编辑功能中，请求到数据以后只有省份进行了选中操作，城市，区县都没有响应。原因是在编辑页面加载下拉选时，省份的下拉选没有做出对应的选择事件。
解决方案：
假设已经成功请求到了数据，做成功以后的事件操作。
// 在外部声明两个变量，分别存放城市和区县的id.var cityId = '';var districtCountyId = '';success:function(data){    // 加载省份    $('#province').val(data.province);    cityId = data.city;    districtCountyId = data.districtCounty;    $('#province').val(data.province).trigger('change'); // 根据省份下拉选选中的值做出对应的选择事件，方便成功调用加载城市下拉选的方法。    $('#city').val(data.city).trigger('change');};// trigger('change')是在编辑过程中给下拉选赋值后也进行选择事件，从而实现城市调用。

然后在加载城市的函数中进行操作。

以上就是我联动下拉选的实现思路和代码。纯属个人见解，记录一下以防万一。如果您看到这篇文章，有更好的解决方式，欢迎留言指教。