layui 根据后台数据动态创建下拉框并同时默认选中的实例


Posted in Javascript onSeptember 02, 2019

第一步 form表单里写好一个下拉框

<div class="layui-form-item">
 <label class="layui-form-label">下拉选择框</label>
 <div class="layui-input-block">
 <select id="selectId" name="interest" lay-filter="city">
 </select>
 </div>
 </div>

第二步 layui 加载jquery模块 动态给select添加option

layui.use(['form','jquery'], function(){
	
 //----------模块----------
 var form = layui.form,$=layui.$;
 
 //动态添加下拉框 同时可以设置默认值
 $.ajax({
 url:'../json/selectId.json',
 dataType:'json',
 //type:'post',
 success:function(data){
 
 $.each(data,function(index,item){
 	console.log(item);
 	//option 第一个参数是页面显示的值,第二个参数是传递到后台的值
 	$('#selectId').append(new Option(item.cityName,item.cityId));//往下拉菜单里添加元素
 	//设置value(这个值就可以是在更新的时候后台传递到前台的值)为2的值为默认选中
 	$('#selectId').val(2);
 })
 
 form.render(); //更新全部表单内容
		//form.render('select'); //刷新表单select选择框渲染
 }
 });
});

模拟后台传递过来的json数据

[
 {
 "cityName":"上海",
 "cityId":"1"
 },
 {
 "cityName":"杭州",
 "cityId":"2" 
 },
 {
 "cityName":"深圳",
 "cityId":"3" 
 },
 {
 "cityName":"北京",
 "cityId":"4" 
 }
]

展示(默认选中cityId=2 即杭州这一项)

layui 根据后台数据动态创建下拉框并同时默认选中的实例

以上这篇layui 根据后台数据动态创建下拉框并同时默认选中的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js arguments.callee的应用代码
May 07 Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
javascript中的闭包概念与用法实践分析
Jul 26 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 Javascript
解决vuex刷新数据消失问题
Nov 12 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 #Javascript
layui表格分页 记录勾选的实例
Sep 02 #Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 #Javascript
layui复选框的全选与取消实现方法
Sep 02 #Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 #Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 #Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 #Javascript
You might like
提升PHP执行速度全攻略(下)
2006/10/09 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
python实现调用其他python脚本的方法
2014/10/05 Python
python调用fortran模块
2016/04/08 Python
python+django加载静态网页模板解析
2017/12/12 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
如何理解python中数字列表
2020/05/29 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
介绍一下linux的文件系统
2015/10/06 面试题
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
新郎新娘婚礼答谢词
2014/01/11 职场文书
养生餐厅创业计划书范文
2014/03/26 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
2015团员个人年度总结
2015/11/24 职场文书