select下拉框的数据回显

时间:2021-05-07 00:40:41

需求描述:select框,下拉后又很多的选项,选择一个,根绝后台代码做查询,完成之后,页面上的select框还是之前选的那个值

解决思路:select本质就是 value和text一一对应,根据你的select下拉菜单,可以在代码中看看value具体是什么,text是什么,比如说value是对应的id而text是对应的name,然后后台根绝选择的内容查询的时候,可以把这个id取出来,然后返回到select存在的页面,通过封装好的函数,来回显。话不多说贴代码。

代码:

<select id="select1" name="select1" class="form-control js-example-basic-single">
<option th:each="s : ${selectMap}" th:value="${s.key}" th:text="${s.value}" xmlns:th="http://www.w3.org/1999/xhtml"></option> //我的selectMap的key value 分别是id 和 name
</select>
<input type="hidden" name="dId" id="dId" th:value="${dId}"/>   //后台传过来的id  modelMap.addAttribute("dId",id); 

js代码:

<script type="text/javascript" th:inline="javascript" xmlns:th="http://www.w3.org/1999/xhtml">
var dId = [[${dId}]]; //后台传过来的id modelMap.addAttribute("dId",id);
if (CommnUtil.notNull(dId)) {
$("#select1").val(dId).trigger("change");//把select的value是id值的那个对应的文本显示出来 trigger是jQuery封装好的方法
} else {
$("#select1").val(null).trigger("change");//id为空的话 select框就是空
}
</script>

总结:对于这种小的知识点就是只能这样总结,因为找起来实在是太浪费时间了,身为菜鸟的我要加油!!!

														
		

select下拉框的数据回显的更多相关文章

  1. angularjs 实现下拉框编辑数据回显

    https://www.cnblogs.com/janice-jia/p/9764938.html 正常的js回显选择,需要添加 select ="selected",angula ...

  2. bootstrap selectpicker控件select下拉框动态数据无法回显的问题

    有关于selectpicker下拉框数据回显的问题,当查看一个对象的属性的时候, 发现有关于selectpicker的下拉框并没有将返回的数据进行回显,显示的都是请选择, 经查证,当查看属性的时候,他 ...

  3. select下拉的绑定及回显(ajxa)

    下拉列表一般通过ajax请求数据绑定 // 绑定新闻类型下拉 function news_type() { var news_type=$("#news_type").val(); ...

  4. EF5&plus;MVC4系列&lpar;7&rpar; 后台SelectListItem传值给前台显示Select下拉框&semi;后台Action接收浏览器传值的4种方式&semi; 后台Action向前台View视图传递数据的四种方式&lpar;ViewDate&comma;TempDate&comma;ViewBag&comma;Model &lpar;实际是ViewDate&period;Model传值&rpar;&rpar;

    一:后台使用SelectListItem 传值给前台显示Select下拉框 我们先来看数据库的订单表,里面有3条订单,他们的用户id对应了 UserInfo用户表的数据,现在我们要做的是添加一个Ord ...

  5. javascript遍历select下拉框判断其中值是否与指定值相等

    用jquery多了,就忘了原生的js是如何写的了,还需要多加巩固. 需求:jsp回显一select下拉框.选中指定值. 用户点击修改 该select进行已有值回显.有两种解决方法 一.js中获取用户的 ...

  6. HTML中的select下拉框内容显示不全的解决办法

    HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...

  7. Django forms表单 select下拉框的传值

    今儿继续做项目,学习了Django的forms生成前端的代码. forms.py class SignupForm(forms.Form): username = forms.CharField(va ...

  8. select &&num;19979&semi;&&num;25289&semi;&&num;26694&semi; disabled &&num;21017&semi; Form &&num;33719&semi;&&num;21462&semi;&&num;19981&semi;&&num;21040&semi;&&num;20540&semi;

    select 下拉框 disabled 则 Form 获取不到值 有时候需要禁用 下拉框 , 但是表单又需要获取到 下拉框的值. 解决方案1: 使用文本框和隐藏域 来代替下拉框 disabled 解决 ...

  9. 在element-ui的select下拉框加上滚动加载

    在项目中,我们需要运用到很多来自后端返回的数据.有时是上百条,有时甚至上千条.如果加上后端的多表查询或者数据量过大,这就导致在前端的显示就会及其慢,特别是在网络不好的时候更是如此. 自然,后端就做了一 ...

随机推荐

  1. 4&period;3&period;3版本之引擎bug

    bug描述: IOS设备上,当使用WWW www = WWW.LoadFromCacheOrDownload(url, verNum); 下载资源时,第一次下载某个资源,www.assetBundle ...

  2. UIWebView用法详解及代码分享

    今天我们来详细UIWebView用法.UIWebView是iOS内置的浏览器控件,可以浏览网页.打开文档等 能够加载html/htm.pdf.docx.txt等格式的文件. 用UIWebView我们就 ...

  3. Eclips将lib打入war中

    在项目的属性, java build path -> Libraries -> Add library.. -> Web app Libraries .即可. 在属性中, Deplo ...

  4. js&amp&semi;jquery验证邮箱和手机号是否正确范例

    实现源码: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt ...

  5. 纯servlet返回xml数据

    ... void doget..... response.setContentType("application/xml");//设置格式  PrintWriter out = r ...

  6. &period;net中String是引用类型还是值类型 以及 C&num;深层拷贝浅层拷贝

    http://www.cnblogs.com/yank/archive/2011/10/24/2204145.html http://www.cnblogs.com/zwq194/archive/20 ...

  7. Flight学习(一)

    翻看git时看到有新消息提示,点进去第一个就是Flight,那么今天就简单来翻译和了解一下这个框架吧,锻炼下自己的英文文档阅读能力,同时也熟悉下JavaScript.时间太赶,难免出现翻译失误和错误, ...

  8. Spring 静态代理&plus;JDK动态代理和CGLIB动态代理

    代理分为两种:静态代理 动态代理 静态代理:本质上会在硬盘上创建一个真正的物理类 动态代理:本质上是在内存中构建出一个类. 如果多个类需要进行方法增强,静态代理则需要创建多个物理类,占用磁盘空间.而动 ...

  9. Exception 01 &colon; org&period;hibernate&period;engine&period;jndi&period;JndiException&colon; Error parsing JNDI name &lbrack;foo&rsqb;

    异常名称 org.hibernate.engine.jndi.JndiException: Error parsing JNDI name [foo] 异常截屏 异常详细信息 org.hibernat ...

  10. php分享二十八:mysql运行中的问题排查

    一:杀掉mysql连接的方法: kill thread_id:  杀掉当前进程,断开连接 kill query thread_id: 只杀掉某连接当前的SQL,而不断开连接. 批量杀死MySQL连接的 ...