精华内容
下载资源
问答
  • 前端下拉框
    千次阅读
    2020-02-27 13:47:47

    做前端项目时,经常会遇到下拉框赋值问题,其实很简单,通过后台接口获取数据后,调用ajaxa就行了;

     $(function () {
       
            loadParkdata();    //执行此函数,从后台获取数据,拼接成option标签,添加到select的里面        
        });
    function loadParkdata() {
        $.ajax({
            url: pref,    //后台controller中的请求路径
            type: 'post',
            async: false,
            datatype: 'json',
            success: function (data) {
                if (data.code == '1000') {
                    var parknames = [];
                        //下拉矿默认值
                    parknames.push('<option value="">药品类型</option>')
                    for (var i = 0, len = data.data.categorys.length; i < len; i++) {
                        var parkdata = data.data.categorys[i];
                        //拼接成多个<option><option/>
                        parknames.push('<option value="' + parkdata.id + '">' + parkdata.name + '</option>')
                    }
                    $("#parkID").html(parknames.join(' '));//根据parkID(根据你自己的select的ID写)填充到select标签中
                }
            },
            error: function () {
            }
        });
    }

     

    更多相关内容
  • 下拉框动态获取在后端 constant 中定义好的 常量类型 问题描述 常量的定义当从0一直排序,当前的接口获取到的动态列表正确,但是当特殊情况前几种类型不显示,即不是从 0 开始,只显示用户想要显示的选项,会出现...

    项目场景:

    下拉框动态获取在后端 constant 中定义好的 常量类型


    问题描述

    常量的定义当从0一直排序,当前的接口获取到的动态列表正确,但是当特殊情况前几种类型不显示,即不是从 0 开始,只显示用户想要显示的选项,会出现空值的现象

    java 接口(可以有两种方式)
    方式一:

    // List faultTypeMaps = Arrays.asList(“无法启动”, “中断扫描”, “间接性故障”,“其他”); //0无法启动 1中断扫描 2间接性故障 3其他
    List faultTypeMaps = Arrays.asList(“无法启动”, “中断扫描”, “间接性故障”,“其他”,“服务合同”, “保外维修”, “单次保养”,“销售让步”); //4服务合同 5保外维修 6单次保养 7销售让步:保外不收费维修
    List faultRankMaps = Arrays.asList(“一般”, “严重”, “紧急”,“技术改造”);
    List statusMaps = Arrays.asList(“待派工”, “已派工”, “接单”, “维修中”, “完成”);//0 1 2 3 4
    List serviceTypeMaps = Arrays.asList(“服务合同”, “单次维修”, “保养”, “优化服务”);//0 1 2 3

    @RequestMapping("/opt")
    public R opt(@RequestBody Map<String, Object> params){

        String type = params.get("type").toString();
        List<String> list = new ArrayList<>();
        if(type.equals("faultType")){
            list = faultTypeMaps;
        }else if(type.equals("faultRank")){
            list = faultRankMaps;
        }else if(type.equals("status")){
            list = statusMaps;
        }else if(type.equals("serviceType")){
            list = serviceTypeMaps;
        }
    
        List<Map<String, Object>> listMaps = new ArrayList<>();
    
        for(int i = 0; i <list.size();i++) {
            Map<String, Object> map = new HashMap<>();
            map.put("key", list.get(i));
            map.put("value", i);
            listMaps.add(map);
        }
    
        return R.ok().putData(listMaps);
    }
    
    方式二:
    (不使用最顶端的  list)
      @RequestMapping("/opt")
        public R opt(@RequestBody Map<String, Object> params){
    
            String type = params.get("type").toString();
            Map<Integer,String> map = new HashMap<>();
            if(type.equals("faultType")){
                map = RepairConstant.FAULT_TYPE;
            }else if(type.equals("faultRank")){
                map = RepairConstant.FAULT_RANK;
            }else if(type.equals("status")){
                map = RepairConstant.STATUS;
            }
    
            List<Map<String, Object>> listMaps = new ArrayList<>();
            for(int i = 0; i <list.size();i++) {
               Map<String, Object> map = new HashMap<>();
               map.put("key", list.get(i));
               map.put("value", i);
               listMaps.add(map);
           }
            return R.ok().putData(listMaps);
        }
    

    定义常量:
    public class RepairConstant {

    /** 维修状态 */
    public static final Map<Integer,String> STATUS = new HashMap<>();
    /**一般,严重,紧急,技术改造*/
    public static final Map<Integer,String> FAULT_RANK = new HashMap<>();
    /**无法启动,屏幕不亮,外光破损,其他*/
    public static final Map<Integer,String> FAULT_TYPE = new HashMap<>();
    //维修类型
    public static final Map<Integer,String> REPAIR_TYPE = new HashMap<>();
    //维修类型
    public static final Map<Integer,String> SERVICE_TYPE = new HashMap<>();
    static {
        STATUS.put(0, "待派工");
        STATUS.put(1, "已派工");
        STATUS.put(2, "接单");
        STATUS.put(3, "维修中");
        STATUS.put(4, "完成");
        
        FAULT_RANK.put(0, "一般");
        FAULT_RANK.put(1, "严重");
        FAULT_RANK.put(2, "紧急");
        FAULT_RANK.put(3, "技术改造");
    

    // FAULT_TYPE.put(0, “无法启动”);
    // FAULT_TYPE.put(1, “屏幕不亮”);
    // FAULT_TYPE.put(2, “外光破损”);
    // FAULT_TYPE.put(3, “其他”);

    // FAULT_TYPE.put(0, “无法启动”);
    // FAULT_TYPE.put(1, “中断扫描”);
    // FAULT_TYPE.put(2, “间接性故障”);
    // FAULT_TYPE.put(3, “其他”);
    FAULT_TYPE.put(4, “服务合同”);
    FAULT_TYPE.put(5, “保外维修”);
    FAULT_TYPE.put(6, “单次保养”);
    FAULT_TYPE.put(7, “销售让步”); //服务合同 保外维修 单次保养 销售让步修

        REPAIR_TYPE.put(0, "内修");
        REPAIR_TYPE.put(1, "外修");
        REPAIR_TYPE.put(2, "保修");
    

    // SERVICE_TYPE.put(0, “服务合同”); // 0 服务合同:已签订维保合同
    // SERVICE_TYPE.put(1, “单次维修”); // 1 单次维修:保外另收费维修
    // SERVICE_TYPE.put(2, “保养”); // 2 保养:保外另收费保养
    // SERVICE_TYPE.put(3, “优化服务”); // 3 优化服务:保外不收费维修"
    }
    }

    前端
    
      <el-form-item prop="faultTypeName" label="报修类型">
                        <im-selector placeholder=""
                          v-model="dataForm.faultType"
                          :mapModel.sync="dataForm"
                          :dataParam="faultTypeParam"
                          mapKeyVal="faultRankName:faufaultTypeltRank"
                          dataType='static'
                          cusUrl="/repair/opt" >
                      </im-selector>
           </el-form-item>
    
       faultRankParam:{type:'faultRank', query:''},
         faultTypeParam:{type:'faultType', query:''},
    

    使用上述方法都出现空值的错误

    原因分析:

    提示:这里填写问题的分析:

    例如:Handler 发送消息有两种方式,分别是 Handler.obtainMessage()Handler.sendMessage(),其中 obtainMessage 方式当数据量过大时,由于 MessageQuene 大小也有限,所以当 message 处理不及时时,会造成先传的数据被覆盖,进而导致数据丢失。

    出现使用问题:
    在这里插入图片描述
    获取到的数据都为空值:
    在这里插入图片描述

    解决方案:

    提示:这里填写该问题的具体解决方案:

    后端接口需重新进行修改:

     @RequestMapping("/opt")
        public R opt(@RequestBody Map<String, Object> params){
    
            String type = params.get("type").toString();
    //        List<String> list = new ArrayList<>();
            Map<Integer,String> map = new HashMap<>();
            if(type.equals("faultType")){
                map = RepairConstant.FAULT_TYPE;
            }else if(type.equals("faultRank")){
                map = RepairConstant.FAULT_RANK;
            }else if(type.equals("status")){
                map = RepairConstant.STATUS;
            }
    
            List<Map<String, Object>> listMaps = new ArrayList<>();
    
    //        for(int key: map.keySet()) {
    //            Map<String, Object> item = new HashMap<>();
    //            item.put("value", key);
    //            item.put("key", map.get(key));
    //            listMaps.add(item);
    //        }
    
            for(int i = 0; i <map.size();i++) {
    
                Map<String, Object> item = new HashMap<>();
                item.put("key", item.get(i));
                item.put("value", i);
                listMaps.add(item);
            }
    
    
            return R.ok().putData(listMaps);
        }
    

    获取都的数据为正确数据列表:
    在这里插入图片描述
    获取到数据列表:
    在这里插入图片描述
    当然,查询时的查询组件也可以 使用 el-select ,即:

     <el-form-item prop="faultType" label="报修类型">
                            <el-select v-model="dataForm.faultType" clearable placeholder="请选择">
                                <!--          <el-option label="无法启动" value="0"></el-option>
                                <el-option label="中断扫描" value="1"></el-option>
                                <el-option label="间接性故障" value="2"></el-option>  -->
                                <el-option label="服务合同" value="4"></el-option>
                                <el-option label="保外维修" value="5"></el-option>
                                <el-option label="单次保养" value="6"></el-option>
                                <el-option label="销售让步" value="7"></el-option>
                                 <el-option label="其他" value="3"></el-option>  
                            </el-select>
        </el-form-item>
    

    此方法具有局限性,需要在前端把所需的选项写成固定的值。

    还有一种就是使用过 el-cascader 然后调用方法进行获取list

    例如:

      <el-form-item prop="deptId" label="科室">
                <el-cascader 
                  clearable
                  :options="deptList"
                  :props="deptOptionProps"
                  v-model="dataForm.deptId"
                  placeholder="请选择"
                  @focus="getDeptList"
                  filterable
                  >
                  </el-cascader>
              </el-form-item>
    
    **方法:**
    
    
     //获取部门列表
        getDeptList (id) {
          if(id > 0){
            this.$axios.post('/sys/dept/dept_select',{"parentId":id}).then(res => {
                this.deptList = res
            }).catch(() => {})
          }
          return;
        },
    

    如果觉得上述几种方法都不合适的话,我们也可以自己写一个组件。
    我们平时用到的都是开源的组件,可直接使用,但有时候不一定适合我们的实际场景,例如:我们平时开发的项目此目录下的都是可以直接使用的组件。
    在这里插入图片描述
    ##总结:

    实现一个功能有时会有很多种方法,在此记录一下自己遇到的问题及解决办法。

    展开全文
  • 部门名称: ajax的编写 // form.on('select(business)',function(data) { $(function () { $.ajax({ type: ...然后看下data有没有 deptId:xxx 看里面值跟你选的有没有一样,基本上就确定你是获取到这个下拉框的值了。
     <label class="layui-form-label">部门名称:</label>
        <div class="layui-input-inline">
            <select name="deptId" id="department" lay-verify="required">
            <option value="" ></option>
        </select>
        </div>
    

    ajax的编写

     // form.on('select(business)',function(data) {
        <!--增加表单里部门下拉框的赋值-->
        $(function () {
            $.ajax({
                type: "POST",
                url: 'selectAllDept',  //从数据库查询返回的是个list
                dataType: "json",
                // contentType: "application/json",
                success: function (data) {
                 $.each(data, function (index, item) {
                     $('#department').append(new Option(item.deptName,item.deptId));//往下拉菜单里添加元素
                    });layui.form.render("select");
    
    
    
                }, error: function () {
                    alert("查询部门失败!!!")
                }
    
            })
        });
    

    两者的关联就在于唯一id:department。
    这个从语句上得出:department是个list<?>集合,每个数据存储这个部门名字以及部门id。
    整个流程就是:定义department(#号用来定义某个变量名)循环存储deptName跟deptId然后把department丢到select标签里的id去,name则是部门Id的属性(deptId),之后 会出现部门名字,点击哪个部门名字,就会存储当下这个部门的名字的具有deptId属性的部门id。然后看下data有没有 deptId:xxx 看里面值跟你选的有没有一样,基本上就确定你是获取到这个下拉框的值了。

    展开全文
  • 一级下拉框: <select id="gametype" onchange="changegame()"> <option value="">--游戏类型--</option> </select> <br> 二级下拉框: <select id="gamelist"> <option ...

    html部分
    一级下拉框:

    <select id="gametype" onchange="changegame()">
    	<option value="">--游戏类型--</option>
    </select>
    <br>
    二级下拉框:
    <select id="gamelist">
    	<option value="">--游戏名称--</option>
    </select>
    
    	js部分
    	var game = new Array();
    	game["纸牌游戏"] = ["斗地主", "炸金花", "蜘蛛纸牌"];
    	game["棋类游戏"] = ["军旗", "象棋", "围棋"];
    	game["网络游戏"] = ["英雄联盟", "穿越火线", "QQ飞车"];
    	function gametypename() {
    		var gametypes = document.getElementById("gametype");
    		// var gametypes = $("#gametype");
    		for (var i in game) {
    			gametypes.add(new Option(i, i), null);
    		}
    	}
    	function changegame() {
    		
    		var gtname = document.getElementById("gametype").value;
    		// alert(gtname);
    		var gamelists = document.getElementById("gamelist");
    		gamelists.options.length=0;
    		for (var i in game) {
    			if (i == gtname) {
    				for (var j in game[i]) {
    					gamelists.add(new Option(game[i][j], game[i][j]), null)
    				}
    			}
    		}
    	}
    	window.onload = gametypename();
    
    • 总结一下,就是用onchange事件触发函数changegame()来实现二级联动,绑定的是二维数组数据,方法都是一样的获取对象add添加 new option(i,i)对象,这两个值是text和value的值,null表示向后追加。

    分享链接https://blog.csdn.net/qq_40410916/article/details/104886628

    展开全文
  • 使用SSM 把数据传到前段下拉框导读MybaitsService层Controller层前段Web 导读 数据从数据库拿出并使用C标签导入前段option标签里 使用框架/语言:SSM + bootstrap +C标签 Mybaits // Mybaits,SQL语句 <!-- 列表 --...
  • 前端下拉框的select 的数据回显

    千次阅读 2020-02-10 17:21:43
    <div class="col-sm-8"> <div class="input-group" style="width: 100%"> <select id="addAuditor" name="addAuditor" class="form-control" multiple="multip...
  • web前端下拉框技术(js)

    千次阅读 2017-02-17 16:12:51
    补充:form对象 代表  form.submit()方法 提交表单的处理  :select对象标签 ---- option对象 标签  select.options 属性 option数组 -- 所有的标签 option的value属  性 .value,内部
  • 在ajax外面定义变量 var 外键属性=‘{回显名.外键属性.外键属性ID}’ 在for循环中加 ‘+(外键属性==arr[i].外键属性ID?‘selected’:’’)+’
  • 前端设置下拉框与选择

    千次阅读 2021-05-24 12:02:29
    后台返回json格式,前端设置下拉框或者选择 <el-form-item v-for="item in selectsOption" :key="item.prop" :label="item.label" :prop="item.prop" > <multiple-select v-model="formModel[item...
  • 易用 检查是否至此后TAB和上下箭头 下拉框里面有很多选项像省份可以划分下等价类,两个字的,三个字的,四个字的。。。每个等价类测一个,然后再把某些省份里面奇怪的市单独拉出来做组合测测内容的显示 ——————...
  • 例。第一个下拉框(a),选中第一个值(a.1)的时候onchange,移除第二个下拉框(b)的4 5 6。第一个下拉框选中第二个(a.2)的时候给第二个下拉框(b)添加 4 5 6 比如,下拉框b的值 有 1 2 3 4 5 6
  • 前端中的下拉框问题

    2021-05-20 19:27:16
    小米商城下拉框 像这种情况,hover一般是给容器这个父元素 这种下拉框,还可以跳转的,小米商城里面是采用,将它写在a标签里面的
  • 前端下拉框学习1

    2017-08-03 19:39:00
    moduleId moduleName 1 传感器 2 WIFI 3 电源 4 蓝牙 result是这样的一个list 选择模块:<select id="chen" style="width: 100px;">...#list moduleList...
  • <input type="hidden" id="selectrole" th:value="${users.role}"> <select name="role" id="selects"> <option >请选择</option> <option value="1">.../select>...
  • 最近在毕业设计的时候,想实现下拉框选择不同的值,后台拿到值后在数据库进行判断查询不同的结果 大概像这样的东西。假设从页面中拿到的值是1,那我就把这个值定义为形参String number 传给数据库。然后自信满满地...
  • 前端设置搜索下拉框

    2020-01-06 18:02:10
    设置搜素下拉框 <tr> <td align="right">承办部门</td> <td align="left"> <div class="layui-input-block" > <input type="text" name="groupName" id="groupName" ...
  • 关于下拉框,不显示内容 前端代码为 ```javascript <tr> 类别td> <td> <select name="typeId"> ${typetlist}" var="type"> ${type.typeId}">${type.typeName}option> c:forEach> select> td> tr> typeList已经在监听...
  • 前端纯原生js编写实现下拉框功能

    千次阅读 2020-11-10 15:58:48
    前端下拉框 因为项目太老,不支持bootstrap等框架的下拉框,所以用jquery敲写了一个纯原生的下拉框,话不多说,直接拿去参考,希望能够对你们有帮助! 1.index.css模块 .carl_select { position: relative; } ....
  • 前端下拉框联动

    2019-08-13 15:23:19
    一,首先咱要搞清楚思路,不论做啥都不要先动手,先要去想好应该怎么做,然后再动手,我们的任务是下拉框联动,比如就是通过省去获取该省有那些市,思路就是我们必须后台我们先必须写两个方法,一个获取所有省的方法...
  • 前端下拉框和显示文字

    千次阅读 2021-05-17 19:58:28
    前端加下拉框和显示文字 已经近一个月没写博客了,不得不吐槽一下自己,说好的日更都不知去哪了,今天应...前端下拉框 之前写了一个聊天室,直接拿过来做demo <div class="send"> <textarea type="text" id
  • 前端实现下拉框.zip

    2021-06-23 13:39:52
    自定义前端下拉框控件
  • 获取select选中的option的值: $("#ddlRegType").find("option:selected").val(); 获取select选中的text: $("#ddlRegType").find("option:selected").text(); 获取select选中的value: $("#ddlRegType").val();...
  • <selectname="pid"id="pid"> <optionvalue="0">--顶级分类--</option> {{eacharticlecate}} ...optionvalue="{{@$value._id}}"{{ifeditList.pid==$value._id}}selected{{/if}}>...
  • 门店: 请选择 {{item.KHID}}-{{item.SNAME}} $(".js-example-basic-single").select2();//下拉框初始化 官方地址:https://select2.org/ js脚本:
  • 下拉框(select),可以多选,带有分组搜索功能
  • 今天做vue的页面下拉框回显问题,回显数据是随机的,好奇怪,虽然多刷新 几下就可以了, 但是这个问题还是存在的,后来发现问题是 回显中的数据是两次请求,因为网络问题两次说不定哪个就请求的快一些, 因为...
  • 今天用前端实现一个表格数据查询,主要是两部分功能,表格渲染,表格查询 HTML布局分为上下两部分,删选栏 和内容表格栏,删选栏是用 ul + li 组合的办法,做的一个层级下拉选择框,具体多少层级,根据项目需求而定...
  • <select class="form-control col-sm-3" id="levelThree" data-placeholder="请选择分类..."> <th:block th:unless="${null == thirdLevelCategories}"> <th:block th:each="c : ${th...
  • 基础效果 其实在element ui里面已经实现了el-select的多选效果 ...el-form-item label="可全选下拉框" prop="apply"> <el-select multiple collapse-tags v-model="ruleForm.apply" @change="change

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,247
精华内容 8,498
关键字:

前端下拉框

友情链接: Unity3D.zip