动态产生select option列表
在很久之前,Insus.NET刚学习前端时,有写过《动态创建一些常的html标签》http://www.cnblogs.com/insus/p/3741665.html
但其中没有实现动态产生select option下拉列表。
在jQuery环境之下使用创建jQuery对象来实现动态产生,那是很方便的事情。
在数据库中准备一些数据:
存储过程:
开发ASP.NET MVC,实现程序,少不了model:
现创建一个实体Entity,即是与数据库通讯:
接下来,你可以创建获取数据集的方法,让前端jQuery执行的方法:

ok,一切准备就绪。
创建一个select对象:
$selectCity = $('<select />').attr({ name: 'city', class: 'selectcity' });
你可以创建一个空的option:
$("<option></option>", { value: "", text: "" }).appendTo($selectCity);
从数据库读出来的数据,现可以动态产生option:
如果你需要在显示时,绑定一个选择值,那怎样实现呢?很简单的,在$.each时,判断一下:

上面的“3”是一个变量,即是你需要绑定的值。下面是效果演示:
动态产生select option列表的更多相关文章
- JS & JQuery 动态添加 select option
因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因. 如有冒犯请联系本人,或删除,或标明出处. 因为好的文章,以前只想收藏,但连接有时候会失效,所以 ...
- JS 通过系统时间限定 动态添加 select option
虽然是个简单的效果,还是需要积累一下,记录一下: 在八月一号之后,删除最后一项,新添加2016级 — — 2015级 2014级 2013级 2012级 在六月一号之后,删除最后一项,新添加2016级 ...
- ie7 动态改变select option时,宽度自动变短解决方法
<html> <head> <title>JQuery</title> <meta http-equiv="pragma" c ...
- 使用js 在IE和火狐firfox 里动态增加select 的option
使用js 在IE和火狐firfox 里动态增加select 的option <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transition ...
- 纯js遍历json获取值动态为select添加option
遍历json数组 并动态为select添加option 直接上代码,重要部分有注解 <!DOCTYPE html> <html lang="en"> < ...
- JS动态改变select选择变更option的index值
document.getElementById("louyuming").options[0].selected=true; function jsSelectIsExitItem ...
- 动态添加select的option [转载]
动态给select标签添加option,结合前人经验以及自己经验,现在总结三种方法供大家参考,一起交流学习!首先是定义的select元素://根据ID获得select元素 var mySelect = ...
- 动态添加select的option
动态给select标签添加option,结合前人经验以及自己经验,现在总结三种方法供大家参考,一起交流学习! 首先是定义的select元素: //根据ID获得select元素var mySelect ...
- Jquery获取select option动态添加自定义属性值失效
Jquery获取select option动态添加自定义属性值失效 2014/12/31 11:49:19 中国学网转载 编辑:李强 http://www.xue163.com/588880/3909 ...
随机推荐
- phantomjs问题收集
1. phantomjs如果遇到重定向的url,两个页面都会加载,onInitialized只会执行一次,onResourceReceived会执行两次.我试过在onInitialized加一段代码, ...
- fastcgi协议解析(nginx)
请求NGINX ->[ {(post data) +> (NGX_HTTP_FASTCGI_STDIN)} * N +> {(environment variables) +> ...
- sim卡联系人name为空的问题。
1,之前的版本出现Bug:新建name为空的sim卡联系人,无法删除. 解决: 2,而后的版本出现新Bug:新建name不为空,Num不为空的sim卡联系人,然后编辑sim卡联系人,将Name清空,无 ...
- SQL 获得两个时间段之间的数据
一般保存在数据库中的日期精度很高,比如'2014-04-15 16:31:22.000' 而一般用户选择的时间精度是精确到日的,比如'2012-04-15' 所以你想取出两个日期之间的数据,如果用下面 ...
- 【NIFI】 Apache NiFI 与 SQL 操作
本里需要基础知识:[NIFI] Apache NiFI 安装及简单的使用 查询SQL 1.拖入一个 Processor:ExecuteSQLRecord(执行sql记录) 2.配置,SETTINGS的 ...
- 【Ruby】ruby安装
Ruby简介 Ruby,一种简单快捷的面向对象(面向对象程序设计)脚本语言,在20世纪90年代由日本人松本行弘(Yukihiro Matsumoto)开发,遵守GPL协议和Ruby License.它 ...
- java:static详解
1.static修饰的变量习惯称为静态变量,static修饰的方法称为静态方法,static修饰的代码块叫做静态代码块. 1)static变量 static变量也称作静态变量,静态变量和非静态变量的区 ...
- Spring框架简介
1.发明者:Rod Johnson 2.轮子理论推崇者: 2.1 轮子理论:不用重复发明轮子 2.2 IT行业:直接只用写好的代码 3.Spring框架宗旨:不重新发明技术,让原有技术使用起来更加方便 ...
- VC播放mp3的方法
1.使用msi库 #include <mmsystem.h> #pragma comment(lib,"winmm.lib") ....... //打开文件 MCI_O ...
- 为什么行内元素不能设置margin-top/margin-bottom/padding-top/padding-bottom?
HTML 里的元素分为替换元素(replaced element)和非替换元素(non-replaced element).- 替换元素是指用作为其他内容占位符的一个元素.最典型的就是img,它只是指 ...