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 flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
使用jQuery获取data-的自定义属性
Nov 10 Javascript
去除html代码里面的script正则方法
May 19 Javascript
JavaScript进阶练习及简单实例分析
Jun 03 Javascript
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
微信小程序获取用户openId的实现方法
May 23 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
Web安全之XSS攻击与防御小结
Dec 13 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实现aes加密类分享
2014/02/16 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
JsChart组件使用详解
2018/03/04 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
Python 转义字符详细介绍
2017/03/21 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
北体毕业生求职信
2014/02/28 职场文书
2014年国培研修感言
2014/03/09 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python
Go语言并发编程 sync.Once
2021/10/16 Golang
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server