年份,学院,专业,班级Js四级联查

   $(document).ready(function () { 
    var innerhtml = '<option value="">学院</option>';
    var innerhtmlMa = '<option value="">专业</option>';
    var innerhtmlclass = '<option value="">班级</option>';
    //入学时间变动
    $("#starTime").click().change(function () {
        $("#collegeName").empty().html(innerhtml);
        $("#specialtyName").empty().html(innerhtmlMa);
        $("#className").empty().html(innerhtmlclass);
        zhuanyeyuanxi();
    } );
    //学院变动
    $("#collegeName").change(function () {
        $("#specialtyName").empty().html(innerhtmlMa);
        $("#className").empty().html(innerhtmlclass);
        zhuanyeyuanxi();
    } );
    //专业变动
    $("#specialtyName").change(function () {
        $("#className").empty().html(innerhtmlclass);
        zhuanyeyuanxi();
    });
}
var zhuanyeyuanxi = function () {
    var startime = $("#starTime").val();
    var Department = $("#collegeName").val();
    var Major = $("#specialtyName").val();
    var innerhtml = '<option value="">学院</option>';
    var innerhtmlMa = '<option value="">专业</option>';
    var innerhtmlclass = '<option value="">班级</option>';
    $.ajax({
            async: false,
            type: "post",
            url: "../../Handler/RegistAjax.ashx",
            data: {
                startime: startime,
                Department: Department,
                Major: Major,
                methodname: "SelectDepartmentCode"
            },
            success: function (data) {
                if ((startime != "" || startime != null) && (Department == "" || Department == null) && (Major == "" || Major == null)) {
                    $.each($.parseJSON(data), function (i, obj) {
                        innerhtml += "<option value=\"" + obj.ID + "\">" + obj.Name + "</option>";
                    });
                    $("#collegeName").empty().html(innerhtml);
                } else if ((startime != "" || startime != null) && (Department != "" || Department != null) && (Major == "" || Major == null)) {
                    $.each($.parseJSON(data), function (i, obj) {
                        innerhtmlMa += "<option value=\"" + obj.ID + "\">" + obj.Name + "</option>";
                    });
                    $("#specialtyName").empty().html(innerhtmlMa);
                }
                else {
                    $.each($.parseJSON(data), function (i, obj) {
                        innerhtmlclass += "<option value=\"" + obj.ID + "\">" + obj.Name + "</option>";
                    });
                    $("#className").empty().html(innerhtmlclass);
                }
            },
            error: function (err) {
                // alert("未知错误,请稍后重试!");
            }
        }
        );
}

上面的代码为Js中的代码利用ajax实现动态绑定。

                                    <select class="am-input-sm " id="starTime" name="starTime">
					<option selected="selected" value="">入学时间</option>
<option value="1950">1950</option> <option value="1951">1951</option> <option value="1952">1952</option></select>


				    <div>
                                        <select class="am-input-sm" id="collegeName" name="collegeName">
                                            <option selected="selected" value="">学院</option>
                                        </select>
                                    </div>
                                    <br />
                                    <div>
                                        <select class="am-input-sm" id="specialtyName" name="specialtyName">
                                            <option value="">专业</option>
                                         </select>
                                    </div>
                                    <br />
                                    <div>
                                        <select class="am-input-sm" id="className" name="className">
                                            <option value="">班级</option>
                                         </select>
                                    </div>
上面的代码为html中的代码。
        /// <summary>
        /// 查询班级院系一般处理程序
        /// </summary>
        public void SelectDepartmentCode()
        {
           
            string msg = string.Empty;
            var asd = "aaa";
            var startime = context.Request.Params["startime"].ToString();
            asd = startime.Substring(2, 2);
            string Department = context.Request.Params["Department"];
            string Major = context.Request.Params["Major"];
            DepartmentController dts=new DepartmentController();
            DataTable dt = dts.GetDepartment(startime.Substring(2, 2).ToString(), Department, Major);
            msg = JsonConvert.SerializeObject(dt);
            context.Response.Write(msg);
        }
         /// <summary>
        /// 获取专业院系列表 2016/12/13
        /// </summary>
        /// <param name="startime">年份</param>
        /// <param name="Department">学院</param>
        /// <param name="Major">专业</param>
        /// <returns></returns>
        public DataTable GetDepartment(string startime, string Department, string Major)
        {
            string sql = string.Format(@"SELECT ID,Name FROM [dbo].[T_DepartmentClass] where IsDelete=0 ");
            if (!string.IsNullOrEmpty(startime) && string.IsNullOrEmpty(Department) && string.IsNullOrEmpty(Major))
            {
                sql += string.Format(@" and DepartmentMajorID=(select top 1 ID from [dbo].[T_DepartmentClass] where type=0 and name like '%{0}%') ", startime);
            }


            else if (!string.IsNullOrEmpty(Department) && !string.IsNullOrEmpty(startime) && string.IsNullOrEmpty(Major))
            {
                sql += string.Format(@" And DepartmentMajorID='{0}'", Department);
            }
            else if (!string.IsNullOrEmpty(Major) && !string.IsNullOrEmpty(Department) && !string.IsNullOrEmpty(startime))
            {
                sql += string.Format(@" And DepartmentMajorID='{0}'", Major);
            }
            DataTable dt = base.ExecuteDataTable(sql);
            return dt;
        }

上面的代码为C#查询

下图为数据库中的表


SELECT TOP 1000 [ID]
      ,[Name]
      ,[DepartmentMajorID]
      ,[Education]
      ,[Type]
      ,[Year]
      ,[Icon]
      ,[GroupID]
      ,[Order]
      ,[ModifyUser]
      ,[CrateDate]
      ,[Creator]
      ,[ModificationDate]
      ,[IsDelete]
      ,[TopTime]
      ,[IsTop]
      ,[Sort]
      ,[yuanxi]
      ,[zhuanye]
  FROM [BHG_QtxApp].[dbo].[T_DepartmentClass]
在js中select取值问题:
        //专业名称
        var specialtyName = trim($("#specialtyName option:selected").text());
        var specialtyNameId = $("#specialtyName option:selected").val();
        //学院名称
        var collegeName = trim($("#collegeName option:selected").text());
        var departmentID = $("#collegeName option:selected").val();






Java后端代码: 1.定义一个Java类作为数据源,包括省份(province)、城市(city)和区县(county): ```java public class Area { private String province; private String city; private String county; public Area(String province, String city, String county) { this.province = province; this.city = city; this.county = county; } public String getProvince() { return province; } public void setProvince(String province) { this.province = province; } public String getCity() { return city; } public void setCity(String city) { this.city = city; } public String getCounty() { return county; } public void setCounty(String county) { this.county = county; } } ``` 2.定义一个Java类作为数据操作类,实现获取数据的方法: ```java import java.util.ArrayList; import java.util.List; public class AreaData { public static List<Area> getAreaData() { List<Area> data = new ArrayList<>(); data.add(new Area("北京市", "北京市", "东城区")); data.add(new Area("北京市", "北京市", "西城区")); data.add(new Area("北京市", "北京市", "朝阳区")); data.add(new Area("北京市", "北京市", "丰台区")); data.add(new Area("北京市", "北京市", "石景山区")); data.add(new Area("北京市", "北京市", "海淀区")); data.add(new Area("北京市", "北京市", "门头沟区")); data.add(new Area("北京市", "北京市", "房山区")); data.add(new Area("北京市", "北京市", "通州区")); data.add(new Area("北京市", "北京市", "顺义区")); data.add(new Area("北京市", "北京市", "昌平区")); data.add(new Area("北京市", "北京市", "大兴区")); data.add(new Area("北京市", "北京市", "怀柔区")); data.add(new Area("北京市", "北京市", "平谷区")); data.add(new Area("北京市", "北京市", "密云区")); data.add(new Area("北京市", "北京市", "延庆区")); data.add(new Area("天津市", "天津市", "和平区")); data.add(new Area("天津市", "天津市", "河东区")); data.add(new Area("天津市", "天津市", "河西区")); data.add(new Area("天津市", "天津市", "南开区")); data.add(new Area("天津市", "天津市", "河北区")); data.add(new Area("天津市", "天津市", "红桥区")); data.add(new Area("天津市", "天津市", "东丽区")); data.add(new Area("天津市", "天津市", "西青区")); data.add(new Area("天津市", "天津市", "津南区")); data.add(new Area("天津市", "天津市", "北辰区")); data.add(new Area("天津市", "天津市", "武清区")); data.add(new Area("天津市", "天津市", "宝坻区")); data.add(new Area("天津市", "天津市", "滨海新区")); data.add(new Area("天津市", "天津市", "宁河区")); data.add(new Area("天津市", "天津市", "静海区")); data.add(new Area("天津市", "天津市", "蓟州区")); return data; } } ``` 3.定义一个Java类作为接口,提供获取数据的方法: ```java import java.util.List; public interface AreaService { List<Area> getAreaData(); } ``` 4.实现接口: ```java import java.util.List; public class AreaServiceImpl implements AreaService { @Override public List<Area> getAreaData() { return AreaData.getAreaData(); } } ``` 5.使用Spring框架,配置Bean: ```xml <bean id="areaService" class="com.example.AreaServiceImpl"/> ``` 6.使用Spring注入Bean: ```java @Autowired private AreaService areaService; ``` 7.在Controller中实现获取数据的接口: ```java @RequestMapping("/getAreaData") @ResponseBody public List<Area> getAreaData() { return areaService.getAreaData(); } ``` Vue前端代码: 1.使用axios插件实现前端请求数据: ```javascript import axios from 'axios' export function getAreaData() { return axios({ url: '/getAreaData', method: 'get' }) } ``` 2.定义一个vue组件作为三级联动的实现: ```vue <template> <div> <select v-model="province" @change="provinceChange"> <option value="">请选择省份</option> <option v-for="item in provinceList" :value="item">{{item.province}}</option> </select> <select v-model="city" @change="cityChange"> <option value="">请选择城市</option> <option v-for="item in cityList" :value="item">{{item.city}}</option> </select> <select v-model="county"> <option value="">请选择区县</option> <option v-for="item in countyList" :value="item">{{item.county}}</option> </select> </div> </template> <script> import {getAreaData} from '@/api/area' export default { name: 'AreaSelect', data() { return { province: '', city: '', county: '', provinceList: [], cityList: [], countyList: [] } }, created() { getAreaData().then(res => { this.provinceList = res }) }, methods: { provinceChange() { this.city = '' this.county = '' this.cityList = this.province.cityList || [] }, cityChange() { this.county = '' this.countyList = this.city.countyList || [] } } } </script> ``` 3.在需要使用的页面中使用组件: ```vue <template> <div> <area-select></area-select> </div> </template> <script> import AreaSelect from '@/components/AreaSelect' export default { name: 'Demo', components: { AreaSelect } } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值