二级下拉框html
<div class="control-group">
<label class="col-sm-1 control-label" style="padding-right: 0px;">接单区域:</label>
<div class="col-sm-2" style="padding: 0px;">
<select class="form-control" id="deptId" name="deptId" value="请选择机构" onchange="selectArea()">
<option value='0' selected>选择机构</option>
</select>
</div>
</div>
<div class="col-sm-2" style="padding: 0px;">
<select class="form-control" id="areaId" name="areaId">
<option value='0' selected>选择区域</option>
</select>
</div>
二级下拉框js
function selectdept(){ //查询机构
$.ajax({
type:'get',
url: prefix + "/listdept",
//data:'cparentId='+cityId,
success:function(data){
var cityElement = document.getElementById("deptId");
var optss="<option value='0' selected>选择机构</option>";
for( var i = 0; i < data.length; i++){
optss += "<option value='"+data[i].deptId+"'>"+data[i].deptName+"</option>";
}
cityElement.innerHTML=optss;
//$('#deptId').selectpicker('refresh');
}
});
}
function selectArea(){ //查询区域
var deptId = document.getElementById("deptId").value;
var cityElement= document.getElementById("areaId");
var optss="<option value='0' selected>选择区域</option>";
if(deptId==0){
cityElement.innerHTML=optss;
//$('#areaId').selectpicker('refresh');
return;
}
$.ajax({
type:'get',
url: prefix + "/listArea",
data:'deptId='+deptId,
success:function(data){
for( var i = 0; i < data.length; i++){
optss += "<option value='"+data[i].areaId+"'>"+data[i].areaName+"</option>";
}
cityElement.innerHTML=optss;
//$('#areaId').selectpicker('refresh');
}
});
}
动态加载查询页面的下拉选项
function selectjob(){
$.ajax({
type:'get',
url: prefix + "/listjob",
//data:'cparentId='+cityId,
success:function(data){
var cityElement = document.getElementById("job"); //job为要动态添加选项的select的id
var optss="<option value='' selected>全部</option>";
for( var i = 0; i < data.length; i++){
optss += "<option value='"+data[i]+"'>"+data[i]+"</option>";
}
cityElement.innerHTML=optss;
//$('#deptId').selectpicker('refresh');
}
});
}