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判断单选框或复选框是否选中方法集锦
Apr 04 Javascript
JavaScript动态调整TextArea高度的代码
Dec 28 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 Javascript
使用jquery如何获取时间
Oct 13 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 Javascript
react合成事件与原生事件的相关理解
May 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
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
JavaScript 字符串连接性能优化
2008/12/20 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
javascript中的event loop事件循环详解
2018/12/14 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
Python import自定义模块方法
2015/02/12 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
班级德育工作实施方案
2014/02/21 职场文书
个人授权委托书格式
2014/08/30 职场文书
工作总结与自我评价
2014/09/18 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
七一慰问简报
2015/07/20 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python
Elasticsearch 配置详解
2022/04/19 Java/Android
服务器间如何实现文件共享
2022/05/20 Servers