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 陷阱 window全局对象
Nov 26 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
AngularJS中$apply方法和$watch方法用法总结
Dec 13 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
全面解析Vue中的$nextTick
Dec 24 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
xml在joomla表单中的应用详解分享
2012/07/19 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
JQuery开发的数独游戏代码
2010/10/29 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
python制作小说爬虫实录
2017/08/14 Python
python如何读取bin文件并下发串口
2019/07/05 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
IRO美国官网:法国服装品牌
2018/03/06 全球购物
英国复古服装购物网站:Collectif
2019/10/30 全球购物
static函数与普通函数有什么区别
2015/12/25 面试题
入学生会自荐书范文
2014/02/05 职场文书
环保建议书
2014/03/12 职场文书
继承公证书样本
2014/04/04 职场文书
竞赛口号大全
2014/06/16 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
房产电话营销开场白
2015/05/29 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
JavaScript实现栈结构详细过程
2021/12/06 Javascript