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 相关文章推荐
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
小程序分享模块超级详解(推荐)
Apr 10 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
使用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
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
AJAX的使用方法详解
2017/04/29 PHP
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
python获取url的返回信息方法
2018/12/17 Python
python截取两个单词之间的内容方法
2018/12/25 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
几个数据库方面的面试题
2016/07/01 面试题
ORACLE第二个十问
2013/12/14 面试题
.NET程序员的几道面试题
2012/06/01 面试题
给儿子的表扬信
2014/01/15 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
孟佩杰观后感
2015/06/17 职场文书
导游词之西递宏村
2019/12/10 职场文书
Java Spring读取和存储详细操作
2022/08/05 Java/Android