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 相关文章推荐
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
node.js从数据库获取数据
May 08 Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
javascript实现最长公共子序列实例代码
Feb 05 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
域名查询代码公布
2006/10/09 PHP
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
深入php处理整数函数的详解
2013/06/09 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
webpack分离css单独打包的方法
2018/06/12 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
Python中列表(list)操作方法汇总
2014/08/18 Python
python:print格式化输出到文件的实例
2018/05/14 Python
Sanic框架流式传输操作示例
2018/07/18 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
python编写俄罗斯方块
2020/03/13 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
python中round函数保留两位小数的方法
2020/12/04 Python
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
外贸业务员岗位职责
2013/11/24 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
店铺转让协议书
2014/12/02 职场文书
第一军规观后感
2015/06/12 职场文书
班主任培训研修日志
2015/11/13 职场文书
vue 实现上传组件
2021/05/31 Vue.js