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代码(jquery)
Sep 12 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
JS中捕获console.log()输出的方法
Apr 16 Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
vue 中 命名视图的用法实例详解
Aug 14 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
JS实现纸牌发牌动画
Jan 19 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
239军机修复记
2021/03/02 无线电
我常用的几个类
2006/10/09 PHP
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
php动态生成版权所有信息的方法
2015/03/24 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
Javascript读取cookie函数代码
2010/10/16 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
给Python入门者的一些编程建议
2015/06/15 Python
python脚本内运行linux命令的方法
2015/07/02 Python
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
python自动化之Ansible的安装教程
2019/06/13 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
介绍下Lucene建立索引的过程
2016/03/02 面试题
2014年采购工作总结
2014/11/20 职场文书
坎儿井导游词
2015/02/09 职场文书
防汛通知
2015/04/25 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL