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中的console.trace()函数介绍
Dec 29 Javascript
js随机生成网页背景颜色的方法
Feb 26 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
javascript实现Table排序的方法
May 15 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
AngularJS路由实现页面跳转实例
Mar 03 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
bootstrap轮播模板使用方法详解
Nov 17 Javascript
Vue3 源码导读(推荐)
Oct 14 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动态实现表格跨行跨列实现代码
2012/11/06 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
Javascript函数的参数
2015/07/16 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
vue bootstrap小例子一枚
2017/06/09 Javascript
require.js中的define函数详解
2017/07/10 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
2020/02/13 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
python numpy元素的区间查找方法
2018/11/14 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
文明教师事迹材料
2014/01/16 职场文书
爱祖国演讲稿
2014/05/04 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
老公保证书怎么写
2015/02/26 职场文书
趣味运动会加油词
2015/07/18 职场文书