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