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 相关文章推荐
utf-8编码引起js输出中文乱码的解决办法
Jun 23 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
删除select中所有option选项jquery代码
Aug 12 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
Javascript中的神器——Promise
Feb 08 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 Javascript
JavaScript错误处理操作实例详解
Jan 04 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
JavaScript中的null和undefined用法解析
Sep 30 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 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
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
深入浅出php socket编程
2015/05/13 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
jquery中radio checked问题
2015/03/16 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
wxPython窗口的继承机制实例分析
2014/09/28 Python
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
Django工程的分层结构详解
2019/07/18 Python
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
《鸟的天堂》教学反思
2014/02/27 职场文书
工商管理自荐书
2014/07/06 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
2015年市场部工作总结
2015/04/30 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
期中考试后的感想
2015/08/07 职场文书
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技