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 相关文章推荐
js螺旋动画效果的具体实例
Nov 15 Javascript
javascript中Object使用详解
Jan 26 Javascript
微信小程序 Flex布局详解
Oct 09 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 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获取文件名称和扩展名的方法
2017/02/07 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
微信小程序实现发红包功能
2018/07/11 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
Python创建日历实例
2014/08/21 Python
Python入门篇之对象类型
2014/10/17 Python
python交互式图形编程实例(三)
2017/11/17 Python
名片管理系统python版
2018/01/11 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
python如何爬取网页中的文字
2020/07/28 Python
Python如何进行时间处理
2020/08/06 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
酒店总经理欢迎词
2014/01/08 职场文书
应届生简历中的自我评价
2014/01/13 职场文书
我读书我快乐演讲稿
2014/05/07 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
golang json数组拼接的实例
2021/04/28 Golang
MySQL 视图(View)原理解析
2021/05/19 MySQL
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android