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 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 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
PHP简单系统查询模块代码打包下载
2008/06/07 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
PHP 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
python实现字符串加密成纯数字
2019/03/19 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
wxPython实现文本框基础组件
2019/11/18 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
国税会议欢迎词
2014/01/16 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
营运督导岗位职责
2015/04/10 职场文书
工作简报范文
2015/07/21 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript
python中pycryto实现数据加密
2022/04/29 Python