三级联动下拉选+调用
2017-11-03 10:01
411 查看
自己在用联动下拉选的时候出现的问题及解决思路。
以省市县联动为例:
思路:页面初始化加载省级下拉选,在选择省级下拉选时触发jQuery的选中事件从而调用请求市级下拉选的方法。
html代码片段(采用的时bootstrap框架):
页面显示就是这个样子了。
下面时请求的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);
}; });}
区县加载。
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>')
}
});
});
/*
这段代码就是先加载省份下拉选,然后在
97c9
省份进行选择的时候,通过“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')是在编辑过程中给下拉选赋值后也进行选择事件,从而实现城市调用。
然后在加载城市的函数中进行操作。
以上就是我联动下拉选的实现思路和代码。纯属个人见解,记录一下以防万一。如果您看到这篇文章,有更好的解决方式,欢迎留言指教。
以省市县联动为例:
思路:页面初始化加载省级下拉选,在选择省级下拉选时触发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>')
}
});
});
/*
这段代码就是先加载省份下拉选,然后在
97c9
省份进行选择的时候,通过“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')是在编辑过程中给下拉选赋值后也进行选择事件,从而实现城市调用。
然后在加载城市的函数中进行操作。
以上就是我联动下拉选的实现思路和代码。纯属个人见解,记录一下以防万一。如果您看到这篇文章,有更好的解决方式,欢迎留言指教。
相关文章推荐
- jquery+ligerform三级联动下拉框
- javascript实现日期三级联动下拉框选择菜单
- jQuey/js 省市县三级下拉框联动的回显(简单易懂)
- JavaScript实现二级、多级(N级)联动下拉列表框更新版,支持IE6,FireFox,函数和类两种调用方式,支持到N级,非常通用。
- ajax+jsp实现三级联动下拉框
- 用php和ajax写一个省市区的三级联动,实现地区的下拉选择
- asp.net(c#)用Ajax调用web 服务实现省市县三级联动
- Android实现三级联动下拉框 下拉列表spinner
- Ajax实现三级联动下拉框
- Android实现三级联动下拉框 下拉列表spinner
- asp 三级数据库联动下拉列表
- dede 三级和二级菜单的联动SQL调用
- JavaScript实现二级、多级(N级)联动下拉列表框更新版,支持IE6,FireFox,函数和类两种调用方式,支持到N级,非常通用。
- Atlas实现无刷新三级联动下拉框
- javascript省市区三级联动下拉框菜单实例演示
- 简单的js日期三级联动下拉代码
- 三级联动下拉框
- AJAX调用页面后台代码方法实现下拉框二级联动效果
- 实现三级联动下拉框 下拉列表… 分类: Android开发 2014-05-30 10:57 67人阅读 评论(0) 收藏
- 三级联动下拉框