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


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

阅读更多
文章标签: select
个人分类: js select 多级下拉
想对作者说点什么? 我来说一句

jquery多级select选框.zip

2009年10月21日 2KB 下载

多级下拉导航 多级下拉导航

2009年05月18日 2KB 下载

ztree地区联查

2018年05月16日 3KB 下载

android下拉选框

2017年12月16日 23.31MB 下载

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭