jQuery动态产生select option下拉列表


Posted in Javascript onMarch 15, 2017

但其中没有实现动态产生select option下拉列表。

在jQuery环境之下使用创建jQuery对象来实现动态产生,那是很方便的事情。

 在数据库中准备一些数据:

jQuery动态产生select option下拉列表

存储过程:

jQuery动态产生select option下拉列表

开发ASP.NET MVC,实现程序,少不了model:

jQuery动态产生select option下拉列表

现创建一个实体Entity,即是与数据库通讯:

jQuery动态产生select option下拉列表

接下来,你可以创建获取数据集的方法,让前端jQuery执行的方法:

jQuery动态产生select option下拉列表

ok,一切准备就绪。

创建一个select对象:

$selectCity = $('<select />').attr({ name: 'city', class: 'selectcity' });

你可以创建一个空的option:

$("<option></option>", { value: "", text: "" }).appendTo($selectCity);

从数据库读出来的数据,现可以动态产生option:

jQuery动态产生select option下拉列表

如果你需要在显示时,绑定一个选择值,那怎样实现呢?很简单的,在$.each时,判断一下:

jQuery动态产生select option下拉列表

上面的“3”是一个变量,即是你需要绑定的值。下面是效果演示:

jQuery动态产生select option下拉列表

以上所述是小编给大家介绍的jQuery动态产生select option下拉列表,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
javascript实现复选框超过限制即弹出警告框的方法
Feb 25 Javascript
Bootstrap如何创建表单
Oct 21 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
微信小程序实现工作时间段选择
Feb 15 Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 Javascript
原生JS封装vue Tab切换效果
Apr 28 Vue.js
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 #Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 #Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 #Javascript
利用vue.js插入dom节点的方法
Mar 15 #Javascript
js实现彩色条纹滚动条效果
Mar 15 #Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 #Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 #Javascript
You might like
多人战的战术与战略
2020/03/04 星际争霸
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
python实现探测socket和web服务示例
2014/03/28 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
python字典按照value排序方法
2020/12/28 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
美国知名艺术画网站:Art.com
2017/02/09 全球购物
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
外语专业毕业生个人的自荐信
2013/11/19 职场文书
内勤主管岗位职责
2014/04/03 职场文书
社会实践活动总结报告
2014/04/29 职场文书
社区志愿者培训方案
2014/06/10 职场文书
违纪检讨书
2015/01/27 职场文书
MySQL系列之二 多实例配置
2021/07/02 MySQL
Python常遇到的错误和异常
2021/11/02 Python
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL