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编程起步(第五课)
Feb 27 Javascript
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
Mar 09 Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
Aug 05 Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 Javascript
js实现省市级联效果分享
Aug 10 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
vue实现户籍管理系统
May 29 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 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魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
python通过shutil实现快速文件复制的方法
2015/03/14 Python
python中使用序列的方法
2015/08/03 Python
深入了解Python数据类型之列表
2016/06/24 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
python中的set实现不重复的排序原理
2018/01/24 Python
对Python信号处理模块signal详解
2019/01/09 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
通过实例解析python描述符原理作用
2020/01/22 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
高考学习决心书
2015/02/04 职场文书
捐书仪式主持词
2015/07/04 职场文书
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL