脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → layui 根据后台数据动态创建下拉框并同时默认选中

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

 更新时间：2019年09月02日 16:32:46   作者：this is 小疯子  
今天小编就为大家分享一篇layui 根据后台数据动态创建下拉框并同时默认选中的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

第一步 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 根据后台数据动态创建下拉框并同时默认选中的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JavaScript对象详解之对象属性的添加

    JavaScript对象详解之对象属性的添加

    这篇文章主要给大家介绍了关于JavaScript对象详解之js对象属性的添加的相关资料,在JavaScript中对象是通过键值对来存储数据的一种数据类型,可以通过直接给对象添加属性的方式来增加对象的属性,需要的朋友可以参考下
    2023-07-07
  • JavaScript实现仿淘宝商品购买数量的增减效果

    JavaScript实现仿淘宝商品购买数量的增减效果

    最近接了个项目，要开发一个地方的O2O租书项目，使用的是asp.net mvc技术，其中咋图书详情页，用户可以输入借阅的数量，器实现此功能的方法是使用了js来控制数量的增减和校验，对js实现商品数量的增减功能感兴趣的朋友一起学习吧
    2016-01-01
  • 浅谈JS中json数据的处理

    浅谈JS中json数据的处理

    下面小编就为大家带来一篇浅谈JS中json数据的处理。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • layui table复选框禁止某几条勾选的实例

    layui table复选框禁止某几条勾选的实例

    今天小编就为大家分享一篇layui table复选框禁止某几条勾选的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript调用Activex控件的事件的实现方法

    JavaScript调用Activex控件的事件的实现方法

    最近在搞一个客户端调用activex控件的开发。一些实现方法小结，需要的朋友可以参考下。
    2010-04-04
  • javascript操作表格排序实例分析

    javascript操作表格排序实例分析

    这篇文章主要介绍了javascript操作表格排序,涉及javascript数组排序与表格操作的相关技巧,需要的朋友可以参考下
    2015-05-05
  • 详解JS如何进行变量解构

    详解JS如何进行变量解构

    JavaScript中,可以使用解构赋值的方式来对数组或者对象进行变量解构,下面小编就来为大家详细介绍一下JavaScript实现数组或者对象解构的方法吧
    2023-11-11
  • js表数据排序 sort table data

    js表数据排序 sort table data

    对于表格的排序，是很不错的一个功能，方便用户快速的分析一些数据。
    2009-02-02
  • JavaScript中的break语句和continue语句案例详解

    JavaScript中的break语句和continue语句案例详解

    本文详细介绍了JavaScript中的break和continue语句的用法及其应用场景,break用于提前退出循环,而continue用于跳过当前迭代,还介绍了标签化的break和continue,以及如何在实际编程中合理使用这些语句以提高代码的效率和可读性,感兴趣的朋友一起看看吧
    2025-03-03
  • js与jquery实时监听输入框值的oninput与onpropertychange方法

    js与jquery实时监听输入框值的oninput与onpropertychange方法

    这篇文章主要介绍了js与jquery实时监听输入框值的oninput与onpropertychange方法,实例分析了oninput与onpropertychange实现下拉框里自动匹配关键字实时监听文本框value值变化的功能,需要的朋友可以参考下
    2015-02-02

最新评论