精华内容
下载资源
问答
  • 1.使用select 并且回绑数据; 页面: 状态: <select name="status" th:field="*{status}" id="idstatus" class="input-select" th:value="*{status}"> <option value="">--请选择--</option> &...

    1.使用select 并且回绑数据;

    页面:
    状态:

    <select name="status" th:field="*{status}" id="idstatus" class="input-select" th:value="*{status}"> 
    <option value="">--请选择--</option> 
    <option th:each="cts,userStat:${inqList}" th:value="${cts.key}" th:text="${cts.value}"></option> 
    
    </select> 
    

    后台controller:

    modelAndView.addObject("inqList",InquiryConst.inqList); 
    

    InquiryConst 类中订单inqList

    public static final List<KeyValue> inqList = new ArrayList<KeyValue>(); 
        static { 
            KeyValue keyValue = new KeyValue("0","询价中"); 
            inqList.add(keyValue); 
            KeyValue keyValue1 = new KeyValue("1","已委托"); 
            inqList.add(keyValue1); 
            KeyValue keyValue2 = new KeyValue("2","已下架"); 
            inqList.add(keyValue2); 
            KeyValue keyValue3 = new KeyValue("3","已失效"); 
            inqList.add(keyValue3); 
            KeyValue keyValue4 = new KeyValue("4","已过期"); 
            inqList.add(keyValue4); 
        } 
    

    显示效果:
    在这里插入图片描述
    2.动态实现select 级联:

    <tr> 
    <td>发货地</td> 
    <td class="ls0"> 
    <select class="area_select notnull" name="startArea1" id="start_select1"> 
    <option value="">-选择省-</option> 
    <option  th:each="area:${listAreas}" th:value="${area.regionCode}" th:text="${area.regionName}" ></option> 
    </select> 
    <select class="area_select notnull" name="startArea2" id="start_select2"> 
    <option value="">-选择市-</option> 
    </select> 
    <select class="area_select nomr notnull" name="startArea3" id="start_select3"> 
    <option value="">-选择区-</option> 
    </select> 
    </td> 
    </tr> 
    

    后台controller:

    List<SystemArea> listAreas = systemAreaService.listAreas(systemArea); 
    
    //地区 
      mav.addObject("listAreas",listAreas); 
    
    

    级联代码实现:

    $(document).ready(function(){ 
                    $("#start_select1").change(function(){ 
                       var t = $("#start_select1").val(); 
                       if(t ==''){ 
                           return; 
       } 
    
       $.ajax({ 
       url:'/area/code', 
                           async:false, 
       type:'post', 
       data:{id:t,ranNum:Math.random()}, 
                           success:function(data){ 
                               var t2 = $("#start_select2").empty(); 
    
                               for ( var i = 0; i < data.length; i++) { 
                                   t2.append("<option value='"+data[i].key+"'>"+ data[i].value+"</option>"); 
                               } 
                           } 
       }) 
    }); 
    
                    $("#start_select2").change(function(){ 
                        var t = $("#start_select2").val(); 
                        if(t ==''){ 
                            return; 
                        } 
    
                        $.ajax({ 
                            url:'/area/code', 
                            async:false, 
                            type:'post', 
                            data:{id:t,ranNum:Math.random()}, 
                            success:function(data){ 
                                var t3 = $("#start_select3").empty(); 
                                for ( var i = 0; i < data.length; i++) { 
                                    t3.append("<option value='"+data[i].key+"'>"+ data[i].value+"</option>"); 
                                } 
                            } 
                        }) 
                    }); 
    }) 
    

    效果:
    在这里插入图片描述
    radio 使用:

    <li> 
    <span class="label_span">运输方式:</span> 
    <input type="radio" name="transportType" th:field="*{transportType}"  checked id="land" value="0" /><label for="land" class="mr20">陆运</label> 
    <input type="radio" name="transportType" th:field="*{transportType}"  id="sea" value="1"  /><label for="sea" >海运</label> 
    </li> 
    

    transportType:为pojo中的属性名称

    展开全文
  • Thymeleaf 实现内部级联的方法

    千次阅读 2018-03-30 15:11:08
    select name="kid" class="chosen-select form-control" id="kid" data-placeholder="请选择..." onchange="rowcolSel();"&gt; &lt;option&gt;请...
    通过下拉选择kid,动态生成row和col的下拉框

    <select name="kid" class="chosen-select form-control" id="kid" data-placeholder="请选择..." οnchange="rowcolSel();">
    <option>请选择...</option>
    <option th:each="k:${Kitchen}" th:value="${k.id}" th:text="${k.name}" th:attr="row=${k.row},col=${k.col}"></option>

    </select>

    js方法:
    function rowcolSel() {
              $("#row").html("");
              $("#col").html("");
       var row=$("#kid option:selected").attr("row");
              for (i=1;i<=row;i++)
       {
                  $("#row").append("<option value='"+i+"'>"+i+"</option>");
       }
       var col=$("#kid option:selected").attr("col");
       for (i=1;i<=col;i++)
       {
                  $("#col").append("<option value='"+i+"'>"+i+"</option>");
       }
    }
    展开全文
  • 先获取省市县数据返回页面 进入页面加载全部省市县数据 页面选择省市县触发值改变事件,通过ajax获取市县数据 选择市数据修改区县

    先获取省市县数据返回页面

    进入页面加载全部省市县数据

    页面选择省市县触发值改变事件,通过ajax获取市县数据

    选择市数据修改区县

    展开全文
  • 单表的查询我们很轻易的就能够查出省份和城市,但是有很多情况需要进行级联选择查询,本文就是使用select和js实现! 实现效果 实现效果:选择省份,点击另一个select框显示对应城市。 如何实现 想要实现这样的效果...


    单表的查询我们很轻易的就能够查出省份和城市,但是有很多情况需要进行级联选择查询,本文就是使用select和js实现!

    实现效果

    实现效果:选择省份,点击另一个select框显示对应城市。
    在这里插入图片描述

    如何实现

    想要实现这样的效果我们需要给省份这个select添加一个onchange事件,通过js来控制城市的select展示的内容

    代码

    html代码:
    th:value="" 这些代码是使用了Thymeleaf模板引擎,重点是添加一个onchange事件。

     <select class="input-text mySelect"  style="width: 180px; margin-top: 5px;" name="provinceId" id="provinceId" onchange="select_city()">
            <option value="">请选择省份</option>
            <option th:each="table:${listProvince}" th:value="${table.id}" th:text="${table.province}" ></option>
    </select>
    <select class="input-text mySelect"  style="width: 180px; margin-top: 5px;" name="cityId" id="cityId">
            <option value="">请选择城市</option>
            <option th:each="table:${listCity}" th:value="${table.id}" th:text="${table.city}"></option>
     </select>
    

    controller代码:
    queryWrapper、AjaxResult等都是项目里封装的方法,如果不明白很正常。这个方法的意思就是通过省份的id来查找到对应的城市,这些城市为一个List集合,之后将list返回给前端页面。

    /**
         * 省份城市级联查询
         * @param provinceId
         * @return
         */
        @PostMapping("selectCity")
        @ResponseBody
        public AjaxResult selectCity(Long provinceId){
            List<City> listCity = null;
            if(provinceId != null){
                QueryWrapper<City>  queryWrapper = new QueryWrapper<>();
                queryWrapper.lambda().eq(City::getSubordinateProvinces,provinceId);
                listCity = cityService.list(queryWrapper);
            }
            return success(listCity);
        }
    

    js代码:

    <script type="text/javascript">
            $(function () {
                $("select[name='provinceId']").change(function () {
                    select_city();
                })
            })
            function select_city() {
                var obj = document.getElementById("provinceId");
                var provinceId = obj.value;
                $.ajax({
                    type: "post",//请求方式post
                    url: "/font/fontIndex/selectCity",//请求对应的地址,进入controller
                    data: {"provinceId": provinceId},//往controller中传入省份id
                    dataType:"JSON",
                    success: function (data) {//交互成功调用的回调函数,data为返回的城市json数据
                    	//定义city变量为id是cityId的select
                        var city = $("#cityId");
                        //将select清空
                        city.empty();
                        //向select中追加option标签
                        city.append(" <option value=\"\">请选择城市</option>");
                        var d =data.data;
                        if (d != null){
                        	//循环返回的data数据,取得每个城市,追加option标签
                            for(var i =0 ;i < d.length;i++){
                                city.append("<option value=\'"+d[i].id+"\'>"+d[i].city+"</option>");
                            }
                        }
                    },
                    error: function () {
                        alert("请求失败了");
                    }
                });
            };
    </script>
    
    展开全文
  • thymeleaf单选回显,多选回显,默认选中第一个 //默认选中第一个 input type=radio class=hobby2 name=repaymentType required theach =repaymentType,repaymentState${repaymentTypeList} thvalue=${...
  • 用AJAX做下拉框级联

    2013-01-18 09:10:00
    //和上面差不多,是下一级的级联选项,如果不需要可以不用 17 dc = this .options[ this .selectedIndex].value; 18 $.get("./STeaTime", { TID: dc, time: new Date().getTime() }, function (data) { ...
  • Bootstrap+Thymeleaf+Sping boot+Mybatis整合 一、环境配置 IDE:Intellij IDEA 2018.2 JDK:1.8.0_181 maven:4.0.0 Spring boot:2.0.4 mybatis-generator-core-1.3.7 ** 1. pom.xml导入相关依赖 &...
  • SpringBoot SpringBoot的简介 Spring Boot,其设计目的是用来简化 Spring 应用的初始搭建以及开发过程,简化 Maven 配置,自动配置 Spring;嵌入的 Tomcat,无需部署 WAR 文件,可直接运行。 Spring家族为微服务...
  • 下拉菜单二级联动 HTML代码 <table class="table table-bordered"> <!--书籍类别二联下拉单 Start-->...div id="selectBigKinds" onchange="findShortKinds()" >...select name=
  • // 如果需要查询一个部门中的所有员工,则需要一对多注解@OnetoMany,并设置一些级联、加载的属性 // private List<Employee> employees; List或Set } 3.Dao 继承JpaRepository来完成对数据库的操作 1)...
  • 基于SpringBoot+Thymeleaf+Mysql 的博客管理系统1、前期分析(1) 界面(2) 功能分析(3) 实体分析(4)实体ER图、功能图2、功能实现模块(1) 登陆注册(2) 个人信息管理(3) 后端管理(4) 管理员端用户信息...
  • SSM级联查询 基于【SSM整合篇】三 项目准备 本项目基于 【SSM整合篇】 三 SSM整合篇】三. SSM整合+事务+单元测试案例 第一章(共四章)https://blog.csdn.net/TheNew_One/article/details/103888883 SSM整合...
  • 一对多关系,一个部门有多个员工 @ManyToOne //在多的一方使用ManyToOne多对一 @JoinColumn(name = "dept")//@JoinColumn指定关联的一对一方法,通常是主键 //只要获取dept的时候,会自动查询select * from dept ...
  • <html:select property="magnameid" size="1" onchange="onChange(this)" >   </html:select> 杂志期刊<html:select property="magissue" size="1" >   </html:select>        
  • 简易的商品管理系统,主要用springboot + mybatis +thymeleaf 注意 链接的mysql数据库是8.0版本 如果自己运行 可能会遇到mysql数据库版本问题造成的影响 此系统 主要是看b战狂神说 springboot实战模仿写的 前端的...
  • 关于Jqueryweui 的select联动用法

    千次阅读 2019-12-24 11:54:40
    "/static/wechar/js/select.js" > < / script > < script type = "text/javascript" src = "/static/pyxback/js/common/common.js" > < / script > < style > body { background : #f6f6f6 ; } ...
  •  这样,通过上一个下拉框的选择过滤下拉框的内容,基本实现了隐藏的效果,当然,也可以把这种方法利用在下拉框级联选择的功能上,无需Ajax。  该代码在IE6,IE7,Chrome2,Firefox3。5下验证通过。 一个人若不能在...
  • 在淘宝、京东等电商网站,其门户网站都有一个商品品类的多级联动,鼠标移动,就显示...开启了对Thymeleaf模块引擎的支持 server: port: 8081 #logging: # config: classpath:logback_spring.xml # level: # ...
  • Thymeleaf 开发 Web 视图层,第11章介绍Spring Boot 集成 Freemarker 开发 Web 视图层,第12章介绍Spring Boot 集成日志 Logging 系统 sl4j,第13章介绍Spring Boot 集成 Security 开发系统的权限与安全功能,第14章...
  • 基于layui的下拉列表的数据回显

    万次阅读 多人点赞 2018-11-07 17:09:15
    静态网页+layui渲染 html代码 <div class="layui-form-item"> <label class="layui-form-label">选择框</label> <div class="layui-input-block">...select id="t" name="quiz2"&...
  • 19、在表单元素上设置字体大小,以获得更好的移动体验 为了避免移动浏览器(iOS Safari等)在点击下拉列表时放大HTML表单元素,请在添加font-size样式: input[type="text"], input[type="number"], select, textarea...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 136
精华内容 54
关键字:

thymeleaf级联select