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 相关文章推荐
jquery 应用代码 方便的排序功能
Feb 06 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
Dec 10 Javascript
js中top的作用深入剖析
Mar 04 Javascript
网页右侧悬浮滚动在线qq客服代码示例
Apr 28 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
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
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
2020/11/03 Javascript
Python collections模块实例讲解
2014/04/07 Python
python实现黑客字幕雨效果
2018/06/21 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
在django view中给form传入参数的例子
2019/07/19 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
python文件路径操作方法总结
2020/12/21 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
优秀老员工获奖感言
2014/02/15 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
利用Python多线程实现图片下载器
2022/03/25 Python
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏