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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
javascript拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
jquery中post方法用法实例
Oct 21 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
axios异步提交表单数据的几种方法
Aug 11 Javascript
浅谈TypeScript的类型保护机制
Feb 23 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基于数组实现的分页函数实例
2014/08/20 PHP
php实现设计模式中的单例模式详解
2014/10/11 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
求得div 下 img的src地址的js代码
2007/02/28 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
python3.5仿微软计算器程序
2020/03/30 Python
Python制作简易注册登录系统
2016/12/15 Python
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
全球性的在线购物网站:Zapals
2017/03/22 全球购物
VC++笔试题
2014/10/13 面试题
教师岗位职责
2013/11/17 职场文书
采购部岗位职责
2013/11/24 职场文书
体育教师自荐信范文
2013/12/16 职场文书
亲子拓展活动方案
2014/02/20 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
2014年商场工作总结
2014/11/22 职场文书
民事调解书范文
2015/05/20 职场文书
主持人大赛开场白
2015/05/29 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
Go中的条件语句Switch示例详解
2021/08/23 Golang