精华内容
下载资源
问答
  • 许多页面上都涉及有下拉框,即select标签。对于简单的下拉框,被选择的数据是不需要改变的,我们可以用<option></option>写死。这样下拉框的数据永远都是那几条。 示例: <select> 信息一 信息二 信息三 ...
  • select2 动态下拉框插件以及开发心得
  • 设置动态下拉框代码@Bind(id="projectItemName", attribute="value") private String projectItemName; @Accessible private SelectItem[] selectConditions = new SelectItem[0]; /** * 初始化设置选择条件...
  • 一、select相关知识 <select> <option value=0>HTML</option> <option value=1>Java <option value=2>Python </select> 其中,value 是存储到数据库的值,在此处为0,1,2这些数值,label ... label g
  • 目录序正文一、前端样式二、数据展现(1)静态下拉框(2)动态下拉框三、获取下拉框选中传值到后端 序 目的: 基于Mybatis动态获取数据库中的值展现在下拉框,下拉框选中并提交给后台选中内容,由后台进行处理。 ...

    目的: 基于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)

    展开全文
  • LayUI之数据表格中 动态下拉框获取问题概述代码部分 问题概述 layui为我们提供了数据表格,但是标准的layui中并不支持在表格中使用下拉框,而项目中已有写好的select初始化方法,于是我用表格加载完成的回调函数初始...

    LayUI之数据表格中 动态下拉框获取

    问题概述

    layui为我们提供了数据表格,但是标准的layui中并不支持在表格中使用下拉框,而项目中已有写好的select初始化方法,于是我用表格加载完成的回调函数初始化select,达到渲染数据的效果。代码如下:

    代码部分

    由于id相同的select会导致渲染失败,所以此处使用name来作为识别依据

    function _initdictSelectInTable(name, type,title,sort) {
    	$('select[name=\'' + name+'\']').html("");
    	// 某个类型对应的数据(路径末尾为类型编号)
    	if (sort == undefined || sort == null || sort == "" || sort == "null"
    		|| sort) {// true 排序
    		sort = true;
    	} else {
    		sort = false;// 不排序
    	}
    	var titles="请选择";
    	if(title!=undefined&&title!=null&&title!=""){
    		titles=title;
    	}
    	var tplHtml='{{# var list=d;}}<option value="" >'+titles+'</option>{{# for(var i = 0; i< list.length; i++){ }}<option value="{{list[i].value}}" >{{list[i].text}}</option>{{# } }}'
    	ajaxSelect(ctx +app_public+ "/select/sys/" + type + "", {
    		sort : sort
    	}, function(data) {
    		if (data != null) {
    			_renderHtml(data,tplHtml, name);
    			layui.use(['form'], function () {
    				var form = layui.form;
    				form.render('select');//刷新select
    			});
    
    		}
    	}, alert("error"), false);
    }
    

    其中内置的_renderHtml方法用来将封装好的选项渲染进select中

    function _renderHtml(data, tplHtml, name) {
    	// 获取模板内容
    	// 生成/编译模板
    	var theTpl = laytpl(tplHtml);
    	// 根据模板和数据生成最终内容
    	var htmlStr = theTpl.render(data);
    	if(name==undefined||name==null||name==""){
    		return htmlStr;
    	}
    	// 使用生成的内容
    	$('select[name=\'' + name+'\']').append(htmlStr);
    }
    
    展开全文
  • JAVA POI导出带动态下拉框EXCEL模板

    千次阅读 2020-07-07 10:33:35
    } 步骤三:利用反射动态修改注解 public void setClassExcelAttribute(Class clazz,String declareField,String memberKey,Object memberValue) throws Exception{ Field declaredField = clazz.getDeclaredField...

    先看看效果,前4个均是从数据库查询出来的下拉选择:

    步骤一:写EXCEL 注解:

    import java.lang.annotation.Retention;
    import java.lang.annotation.RetentionPolicy;
    import java.lang.annotation.Target;
    
    @Retention(RetentionPolicy.RUNTIME)  
    @Target( { java.lang.annotation.ElementType.FIELD }) 
    public @interface ExcelVOAttribute {
    
    	 /** 
         * 导出到Excel中的名字. 
         */  
        public abstract String name();  
    
        /** 
         * 配置列的名称,对应A,B,C,D.... 
         */  
        public abstract String column();  
    
        /** 
         * 提示信息 
         */  
        public abstract String prompt()  default "";    
    
        /** 
         * 设置只能选择不能输入的列内容. 
         */  
        public abstract String[] combo() default {};    
    
        /** 
         * 是否导出,应对需求:有时我们需要导出一份模板,这是标题需要但内容需要用户手工填写. 
         */  
        public abstract boolean isExport() default true;   
        
        /** 
         * 是否应用到导入模板上
         */  
        public abstract boolean isUsedInImport() default true;   
        
        /** 
         * 是否应用到导出上
         */  
        public abstract boolean isUsedInExport() default true;   
        
    }

    步骤二:写实体类:

    @Data
    @TableName("rst_cycleset")
    public class Cycleset {
    
    
        @TableId(type = IdType.AUTO)
        private Long id;
       // @ExcelVOAttribute(name = "经典分类", column = "A",isUsedInExport=false,isUsedInImport=false, combo = { } )
        private String  sx10dm; //经典分类代码
        @TableField(exist = false)
        @ExcelVOAttribute(name = "经典分类", column = "A")
        private String  sx10mc;
        //@ExcelVOAttribute(name = "产品系列", column = "B",isUsedInExport=false, combo = { } )
        private String  sx11dm; //产品系列代码
        @TableField(exist = false)
        @ExcelVOAttribute(name = "产品系列", column = "B" )
        private String  sx11mc;
        //@ExcelVOAttribute(name = "大类属性", column = "C",isUsedInExport=false, combo = { } )
        private String  sx12dm; //大类属性代码
        @TableField(exist = false)
        @ExcelVOAttribute(name = "大类属性", column = "C")
        private String  sx12mc;
        //@ExcelVOAttribute(name = "产品品类", column = "D",isUsedInExport=false, combo = { } )
        private String  pldm;   //品类代码
        @TableField(exist = false)
        @ExcelVOAttribute(name = "产品品类", column = "D" )
        private String  plmc;
        @ExcelVOAttribute(name = "周期起始", column = "E" )
        private String  cycleFrom;
        @ExcelVOAttribute(name = "周期截止", column = "F")
        private String  cycleTo;
        @ExcelVOAttribute(name = "冻结天数", column = "G" )
        private Integer frozenDays;
        @ExcelVOAttribute(name = "投单货量", column = "H" )
        private Integer deliveryVolume;
        
    
    }

    步骤三:利用反射动态修改注解

      public  void setClassExcelAttribute(Class clazz,String declareField,String                 
                           memberKey,Object memberValue) throws Exception{
            Field declaredField = clazz.getDeclaredField(declareField);
            declaredField.setAccessible(true);
            ExcelVOAttribute annotation = declaredField.getAnnotation(ExcelVOAttribute.class);
            if (annotation != null) {
                InvocationHandler ih = Proxy.getInvocationHandler(annotation);
                Field memberValuesField = ih.getClass().getDeclaredField("memberValues");
                memberValuesField.setAccessible(true);
                Map memberValues = (Map) memberValuesField.get(ih);
                memberValues.put(memberKey, memberValue);
            }
      }
    
      public String[] getClassFieldValueList(Class clazz,String declareField,List list) throws     
                           Exception{
            String[] strArray=new String[list.size()];
            int index=0;
            for(Object object:list){
                Field declaredField = clazz.getDeclaredField(declareField);
                declaredField.setAccessible(true);
                String str=declaredField.get(object).toString();
                //System.out.println(str);
                strArray[index++]=str;
            }
            return strArray;
      }
    
      
    

    步骤四:根据注解加入EXCEL 下拉校验

    //...
    for (int i = 0; i < fields.size(); i++) {  
    	Field field = fields.get(i);  
    	ExcelVOAttribute attr = field.getAnnotation(ExcelVOAttribute.class);  
    	int col = getExcelCol(attr.column());// 获得列号  
    	cell = row.createCell(col);// 创建列  
    	cell.setCellType(HSSFCell.CELL_TYPE_STRING);// 设置列中写入内容为String类型  
    	cell.setCellValue(attr.name());  
    	style=getHeadCellStyler(workbook);
    	 // 如果设置了提示信息则鼠标放上去提示.  
    	if (!attr.prompt().trim().equals("")) 
    	   setHSSFPrompt(sheet, "", attr.prompt(), 3, 3000, col, col); 
    	// 如果设置了combo属性则本列只能选择或者输入下拉中的内容  
    	if (attr.combo().length > 0)  
    	    setHSSFValidation(sheet, attr.combo(), col,workbook);
    	cell.setCellStyle(style);  
     }  
    //...
    
    //由于下列是不确定是所以不能保证不超过255故用隐藏页来放置下列信息
    private  HSSFSheet setHSSFValidation(HSSFSheet sheet,   String[] textlist, int 
                     col,HSSFWorkbook wb) {
            //获取所有sheet页个数
            int sheetTotal = wb.getNumberOfSheets();
            String hiddenSheetName = "hiddenSheet" + sheetTotal;
            HSSFSheet hiddenSheet = wb.createSheet(hiddenSheetName);
            Row row;
            //写入下拉数据到新的sheet页中
            for (int i = 0; i < textlist.length; i++) {
                row = hiddenSheet.createRow(i);
                Cell cell = row.createCell(0);
                cell.setCellValue(textlist[i]);
            }
            //获取新sheet页内容
            String strFormula = hiddenSheetName + "!$A$1:$A$65535";   //hiddenSheetName + !                 定位到用来加载列的新的sheet页,后面则是A列的1-65535为有效性List条件
            DVConstraint constraint =  DVConstraint.createFormulaListConstraint(strFormula);
            // 设置数据有效性加载在哪个单元格上,四个参数分别是:起始行、终止行、起始列、终止列
            CellRangeAddressList regions = new CellRangeAddressList(0,65535, col, col);
            // 数据有效性对象
            DataValidation validation = new HSSFDataValidation(regions,constraint);
            sheet.addValidationData(validation);
            //将新建的sheet页隐藏掉
            wb.setSheetHidden(sheetTotal, true);
            return sheet;
    }
    
    
    
    

    步骤五:导出模板

        @Override
        public void downLoadCycleSetTemplate(HttpServletResponse response) throws Exception {
            QueryWrapper   wrapper=new QueryWrapper();
            List<EZFjsx10> sx10List=fjsx10Dao.selectList(wrapper);
            List<EZFjsx11> sx11List=fjsx11Dao.selectList(wrapper);
            List<EZFjsx12> sx12List=fjsx12Dao.selectList(wrapper);
            List<EZDalei>  plList=daleiDao.selectList(wrapper);
            MyExcel<Cycleset> me = new MyExcel<>(Cycleset.class);
            String[] sx10mcArray=me.getClassFieldValueList(EZFjsx10.class,"sxmc", sx10List);
            String[] sx11mcArray=me.getClassFieldValueList(EZFjsx11.class,"sxmc", sx11List);
            String[] sx12mcArray=me.getClassFieldValueList(EZFjsx12.class,"sxmc", sx12List);
            String[] plmcArray=me.getClassFieldValueList(EZDalei.class,"dlmc", plList);
            Class<? extends Cycleset>  clazz = new Cycleset().getClass();
            me.setClassExcelAttribute( clazz,"sx10mc","combo",sx10mcArray);
            me.setClassExcelAttribute( clazz,"sx11mc","combo",sx11mcArray);
            me.setClassExcelAttribute( clazz,"sx12mc","combo",sx12mcArray);
            me.setClassExcelAttribute( clazz,"plmc","combo",plmcArray);
            me.exportExcelFormat("周期设置导入模板", "周期设置", response);
        }

     

    展开全文
  • 动态下拉框

    2017-02-20 11:18:41
    双击左边的选项,会将该选项移动到右边的下拉列表框中,双击右边的下拉列表框会将该选项移动到左边的下拉列表框中。

    双击左边的选项,会将该选项移动到右边的下拉列表框中,双击右边的下拉列表框会将该选项移动到左边的下拉列表框中。

    1. test.html

    <form id="myForm" name="myForm" method="post">
        <table border="0">
            <tr>
                <td>可选课程:<br>
                    <select name="selectForm" size="5" ondblclick="addOption()">
                        <option value="yuwen">语文</option>
                        <option value="shuxue">数学</option>
                        <option value="lishi">历史</option>
                        <option value="shengwu">生物</option>
                        <option value="zhengzhi">政治</option>
                        <option value="dili">地理</option>
                    </select>
                </td>
                <td>
                    --> <br>
                    <--
                </td>
                <td>
                    已选课程(最多可选三门):<br>
                    <select name="selectTo" size="5" ondblclick="delOption()">
                    </select>
                </td>
            </tr>
        </table>
    </form>

    2. test.js

    function addOption() {
        var myForm = document.getElementById("myForm");
        //获得当前被选择的选项的索引
        var index = myForm.selectForm.selectedIndex;
        //在下拉列表框中没有选项时,index为-1
        if(index>-1) {
            //判断已选课程中是否小于3门
            if(myForm.selectTo.length<3) {
                //获取当前选项的文字
                var optionText = myForm.selectForm.options[index].text;
                //获取当前选项的值
                var optionValue = myForm.selectForm.options[index].value;
                //在下拉列表框中添加选项
                console.log(myForm.selectTo.length);
                myForm.selectTo.options[myForm.selectTo.length] = new Option(optionText,optionValue);
                //删除原下拉列表框中的选项
                myForm.selectForm.remove(index);
            } else {
                alert("最多只能选择三门课");
            }
        }
    }
    
    function delOption() {
        var myForm = document.getElementById("myForm");
        var index = myForm.selectTo.selectedIndex;
        if(index>-1) {
            //获取当前选项的文字
            var optionText = myForm.selectTo.options[index].text;
            //获取当前选项的值
            var optionValue = myForm.selectTo.options[index].value;
            //在下拉列表框中添加选项
            myForm.selectForm.options[myForm.selectForm.length] = new Option(optionText,optionValue);
            //删除原下拉列表框中的选项
            myForm.selectTo.remove(index);
    
        }
    }
    展开全文
  • layui数据表格中加动态下拉框并监听

    千次阅读 2020-07-30 16:11:44
    下拉框 <script type="text/html" id="selectEducation"> {{# if(d.mDataMeasurand == null){ }} <select name="dataexpstr2" lay-filter="dataexpstr3" data-value="{{d.Nid}}"> <option value=...
  • 实例如下所示: <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">... .container li{
  • 今天小编就为大家分享一篇bootstrap下拉框动态赋值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 动态下拉框 ajax

    2019-04-18 01:21:10
    NULL 博文链接:https://354439598.iteye.com/blog/1839612
  • layui中打开弹窗的动态下拉框选中

    千次阅读 2018-10-31 18:12:50
    总结layui.open弹窗中有动态下拉框无法得到所选的值 1.在父页面中加载js 如下: /** eachSelect("id",value,body); * 下拉菜单选中 * @param id select的id * @param val 选中的值 * @param ...
  • 动态下拉框配置档4gl逻辑代码动态下拉框配置档4gl逻辑代码动态下拉框配置档4gl逻辑代码动态下拉框配置档4gl逻辑代码
  • 主要介绍了jQGrid动态填充select下拉框的选项值(动态填充)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 使用jqgrid,要实现在单元格中的动态下拉框,废话不多说,上代码: var gridOption = $("#inLineItemEditList").jqGrid({ url: path, mtype: "get", /* ajax提交方式 */ postData: { ...
  • 官方文档: https://doc.fastadmin.net/doc/178.html 我写的某个下拉: 前端: <div class="form-group"> <label class="control-label col-xs-12 col-sm-2">...input id="c-unit" da
  • JSP如何实现动态下拉框

    千次阅读 2016-05-27 15:13:19
    在开发项目中,经常会遇到大小类的问题,即有两个下拉框,一个为主,一个为次,如果主下拉框选择更新后根据所选择的项从数据库中读取相关数据并更新到次下拉框中.比如主下拉框为大类,次下拉框为大类下的选项,并且页面是...
  • layui下拉框的样式,具体如下代码: <div class="form-group form-row"> <label class="col-form-label col-lg-4">状态</label> <div class="col-lg-8"> <select class="layui-inpu
  • 1.bootstrap-table 单击单行选中 $('#gzrwTable').on('click-row.bs.table', function(e, row, $element) { $('.success').removeClass('success');// 清除前一次操作已选中行的选中状态 $($element).addClass('...
  • easyui 动态下拉框

    千次阅读 2018-08-22 19:02:25
    这里写代码片 function setsecond(){ $("#doWay").combobox('clear'); var stepno = $("#badProduct").datagrid('getSelected').step; var data0 = [{text:"请选择"......
  • js动态下拉框

    2018-02-11 09:41:30
    getSupplierTypeForSpinner("supplierTypeID","",true,true); function getSupplierTypeForSpinner(ctrlID, selectVal, isViewAll,isAsync) { $.ajax({ url: basePath +"...
  • 效果图 body 单位: script //单位下拉框 $("#tbdwDm").combobox ({ editable : false, url : "/dmwh/findDmName ",//url valueField : "dmCode", //相当于 option 中的 value 发送到后台的 textField : "dmName" /...
  • 动态下拉框配置档4fd画面代码动态下拉框配置档4fd画面代码动态下拉框配置档4fd画面代码动态下拉框配置档4fd画面代码
  • ajax实现动态下拉框[JFinal框架]

    千次阅读 2017-03-30 14:27:31
    实现动态下拉选择则框
  • 动态下拉框,从后台获取数据

    千次阅读 2019-06-13 18:38:22
    动态下拉框,从后台获取数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉框示例</title> <script type="text/javascript" src...
  • AJAX 动态下拉框

    2008-04-22 14:32:00
    AJAX 动态下拉框eclipse ,及数据

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,963
精华内容 11,185
关键字:

动态下拉框