下拉选框(单个和多级联查)


二级下拉框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');
        }
    });
}

猜你喜欢

转载自blog.csdn.net/qq_40680190/article/details/80318390