【问题描述】

需要在下拉框中获取数据库的数据

【代码实现】

        private void cobDepart_SelectedIndexChanged(object sender, EventArgs e)
        {
            string value = this.cobDepart.SelectedValue.ToString();
            Console.WriteLine("当前选中的是"+value);
        }

     private void frmAddStaff_Load(object sender, EventArgs e)
        {
 
            cobSex.Text = "--请选择--";
            cobSex.Items.Add("女");
            cobSex.Items.Add("男");

            try
            {
                //调用B层
                IBLL.IDepartBLL departIBLL = AbstractFactory.Factory.CreateConcreteClass(Encapsulation.BLL, Encapsulation.DepartBLL);
                //查询是否存在该卡号
               List<dynamic> list = departIBLL.SelectAll();

                cobDepart.DataSource = list;//使用list来接收查询到的数据源
                cobDepart.DisplayMember = "departmentId";
                cobDepart.ValueMember = "departmentId";
                cobDepart.Text = "--请选择--";
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message);    //抓取B层中的判断异常进行提示
                this.Show();
            }

        }

BLL层

   		/// <summary>
        /// 查询所有的ID
        /// </summary>
        /// <returns></returns>
        public List<dynamic> SelectAll()
        {
            //调用工厂方法创建接口
            IDAL.IDepartDAL departIDAL = AbstractFactory.Factory.CreateConcreteClass(Encapsulation.DAL, Encapsulation.DepartDAL);
            //接受D层的返回值
            List<dynamic> list = departIDAL.SelectAll();

            if (list.Count > 0)//返回数据表类型
            {
                return list;
            }
            else
            {
             
                throw new Exception("查询不到内容！");
            }
        }

DAL层

       /// <summary>
        /// 查询所有的ID
        /// </summary>
        /// <returns></returns>
        public List<dynamic> SelectAll()
        {
            //实例化操作类，进行数据查询，并获取返回值
            SqlHelper sqlHelper = new SqlHelper();

            //执行数据库的查询
            string sql = "SELECT * FROM T_Department ";//构造语句，匹配数据库表

            
            DataTable dt = SqlHelper.GetDataTable(sql);
            List<dynamic> list = new List<dynamic>();
            foreach (DataRow row in dt.Rows) //遍历读取dt里面的数据，并添加到list集合中
            {
                list.Add(new DepartmentInfo()
                {
                    DepartmentId = Convert.ToString(row["departmentId"])
                

                });
            }
            //返回表到到BLL层
            return list;
        }

【遗留问题】

如果要设置下拉框不可以输入，那么可以设置属性DropDownStyle为DropDownList，这样就可以限制下拉框的输入，只显示从数据库中查询到的数据。

但是这样的话，窗体一显示，下拉框就会显示查询到的数据库中的第一条数据，而不是我写的下拉框为空或者是显示“–请选择–”字样。

如果要显示“–请选择–”字样，就只能设置下拉框为可输入的状态。

这个问题暂时还没有解决，应该是我还没有找到正确的方法。 如果你知道答案，欢迎评论留言哦~

序

目的： 基于Mybatis动态获取数据库中的值展现在下拉框，下拉框选中并提交给后台选中内容，由后台进行处理。

正文

一、前端样式

参考：bootstrap-select举例

二、数据展现

（1）静态下拉框

方法一：直接定义

			<form>
				<div class="form-group">
					<div id="left">
						<select class="form-control">
							<option value='1'>aaa</option>
							<option value='2'>bbb</option>
							<option value='3'>ccc</option>
						</select>
					</div>
				</div>
			</form>	

方法二：JavaScript注入

			<form>
				<div class="form-group">
					<div id="left">
						<select class="form-control"></select>
					</div>
				</div>
			</form>	
			<script type="text/javascript">
				var result = [ "aaa", "bbbb", "ccc" ];
				for (var i = 0; i < result.length; i++) {
					$("#left select").append(
							"<option value='"+i+"'>" + result[i] + "</option>");
				}
			</script>

（2）动态下拉框

数据库内容：

动态注入下拉框：

根据上述方法二扩展，从后端获取json值返回到result，
这里主要涉及：如何从后端获取json，
参考之前文章：SSM框架（五）jquery三种数据耦合方式【后端->值->前端】

最终效果：

具体方法：

• 前端jsp：
  
  注意：get获取的json返回值为一个集合

			<form>
				<div class="form-group">
					<div id="left2">
						<select class="form-control"></select>
					</div>
				</div>
			</form>	
			<script type="text/javascript">
				$(document).ready(function(){
						$.get(
							"${basePath}teacher/getall.d",
							function(arr){
								for(var i = 0 ; i < arr.length;i++){
									/*创建新的一行*/
									var newRow = "<option value="+arr[i].teacherId+">"+arr[i].teacherName+"</option>";								
									/*插入新的一行*/
									$("#left2 select").append(newRow);
								}
							}
						);	
				});
			</script>

• controller：（注意：这里返回的是list集合）
  

	@RequestMapping("/getall")
	public @ResponseBody List<TeacherInfo> getTeachers(){
		try {
			return teacherInfoService.findTeachers();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}

• service：
  

List<TeacherInfo> findTeachers() throws SQLException;

• serviceImpl：
  
  这里用的Util配置，直连数据库查询，这里也可以配置到Mybatis中：

	@Override
	public List<TeacherInfo> findTeachers() throws SQLException {
		String sql = "select * from teacher_info";
		Connection con = DBManager.getConnection();
		PreparedStatement pstm = con.prepareStatement(sql);
		ResultSet rs = pstm.executeQuery();
		List<TeacherInfo> teachers = new ArrayList<>();//定义一个列表，存储数据
		while(rs.next()){
			Integer teacherId = rs.getInt(1);
			String teacherName = rs.getString(2);
			String teacherNumber = rs.getString(3);
			//列表中每个元素封装为TeacherInfo实体型
			TeacherInfo t = new TeacherInfo();
			t.setTeacherId(teacherId);
			t.setTeacherName(teacherName);
			//添加到techaers返回列表中
			teachers.add(t);
		}
		pstm.close();
		con.close();
		return teachers;
	}

• Util配置：
  

package com.chinasofti.ssm01.util;

import java.sql.*;


public class DBManager {
	private static final String URL = "jdbc:mysql://localhost:3306/file_server?useUnicode=true&characterEncoding=UTF-8";
	private static final String USERNAME = "root";
	private static final String PASSWORD = "wy123456";
	private static final String CLASSNAME = "com.mysql.jdbc.Driver";//mysql5.7
	

	static{
		try {
			Class.forName(CLASSNAME);
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	
	public static Connection getConnection() throws SQLException{
		Connection con = DriverManager.getConnection(URL, USERNAME, PASSWORD);
		return con;
	}
}

动态加载下拉框参考

三、获取下拉框选中传值到后端

这里主要涉及内容：获取下拉框选中值，并传值到后端
参考前面文章：SSM框架（二）四种控制器请求【前端->值->后端】

---

具体demo在：教师管理系统demo，这里就不重复了。
快速链接：SSM框架（九）Mybatis【多表查询-前后端】交互（教师管理系统demo）

使用elmui下拉框组件

<el-form-item prop="roleIdList" :label="$t('user.roleIdList')" class="role-list">
        <el-select v-model="dataForm.roleIdList" multiple :placeholder="$t('user.roleIdList')">
          <el-option v-for="role in roleList"
          :key="role.id"
          :label="role.name"
          :value="role.id">
          </el-option>
        </el-select>
      </el-form-item>

在date中添加接收

 data () {
    return {
      visible: false,
      roleList: [],
      dataForm: {
        id: '',
        roleIdList: [],

在method中init

methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.dataForm.resetFields()

        Promise.all([
          this.getRoleList()
        ]).then(() => {
          if (this.dataForm.id) {
            this.getInfo()
          }
        })
      })
    },

调用后端数据

 // 获取角色列表
    getRoleList () {
      return this.$http.get('/sys/role/list').then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.roleList = res.data
      }).catch(() => {})
    },

改造

<el-form-item prop="calssify" label="任务分类" class="role-list">
        <el-select v-model="dataForm.classify" multiple placeholder="任务分类">
          <el-option v-for="task in taskList"
          :key="task.id"
          :label="task.name"
          :value="task.id">
          </el-option>
        </el-select>
      </el-form-item>

 data () {
    return {
      visible: false,
      taskList: [],
      dataForm: {
        id: '',
        // roleIdList: [],
        name: '',
        contest: '',
        classify: '',
        creator: '',
        updaterDate: '',
        updater: '',
        createDate: ''
      }
    }
  },

 init () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.dataForm.resetFields()

        Promise.all([
          this.getTaskList()
        ]).then(() => {
          if (this.dataForm.id) {
            this.getInfo()
          }
        })
      })
    },

    // 获取任务类别列表
    getTaskList () {
      return this.$http.get('/sys/menu/list').then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.taskList = res.data
      }).catch(() => {})
    },