在很久之前,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列表的更多相关文章

  1. JS & JQuery 动态添加 select option

    因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因. 如有冒犯请联系本人,或删除,或标明出处. 因为好的文章,以前只想收藏,但连接有时候会失效,所以 ...

  2. JS 通过系统时间限定 动态添加 select option

    虽然是个简单的效果,还是需要积累一下,记录一下: 在八月一号之后,删除最后一项,新添加2016级 — — 2015级 2014级 2013级 2012级 在六月一号之后,删除最后一项,新添加2016级 ...

  3. ie7 动态改变select option时,宽度自动变短解决方法

    <html> <head> <title>JQuery</title> <meta http-equiv="pragma" c ...

  4. 使用js 在IE和火狐firfox 里动态增加select 的option

    使用js 在IE和火狐firfox 里动态增加select 的option <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transition ...

  5. 纯js遍历json获取值动态为select添加option

    遍历json数组 并动态为select添加option 直接上代码,重要部分有注解 <!DOCTYPE html> <html lang="en"> < ...

  6. JS动态改变select选择变更option的index值

    document.getElementById("louyuming").options[0].selected=true; function jsSelectIsExitItem ...

  7. 动态添加select的option [转载]

    动态给select标签添加option,结合前人经验以及自己经验,现在总结三种方法供大家参考,一起交流学习!首先是定义的select元素://根据ID获得select元素 var mySelect = ...

  8. 动态添加select的option

    动态给select标签添加option,结合前人经验以及自己经验,现在总结三种方法供大家参考,一起交流学习! 首先是定义的select元素: //根据ID获得select元素var mySelect ...

  9. Jquery获取select option动态添加自定义属性值失效

    Jquery获取select option动态添加自定义属性值失效 2014/12/31 11:49:19 中国学网转载 编辑:李强 http://www.xue163.com/588880/3909 ...

随机推荐

  1. 2017/2/10:Manven简介与项目管理(入门)

    1.Maven工程的创建 2.使用Manven manven配置文件主要集中在 http://m.blog.csdn.net/article/details?id=50316383

  2. 如何使用GCC生成动态库和静态库

    根据链接时期的不同,库又有静态库和动态库之分.静态库是在链接阶段被链接的,所以生成的可执行文件就不受库的影响,即使库被删除,程序依然可以成功运行.而动态库是在程序执行的时候被链接的.程序执行完,库仍需 ...

  3. 再读c++primer plus 005

    对象和类: 1.类和结构的唯一区别是结构的默认访问类型是public,而类为private: 2.其定义位于类声明中的函数都将自动成为内联函数,也可以在类声明外定义成员函数,并使其成为内联函数,为此只 ...

  4. 35、输入框(UITextField)密码明暗文切换

    - (IBAction)pwdTextSwitch:(UIButton *)sender { // 前提:在xib中设置按钮的默认与选中状态的背景图 // 切换按钮的状态 sender.selecte ...

  5. 初识python函数

    一.函数 1.什么是函数 函数是对功能或者动作的封装 2.函数的语法和定义 def 函数名(): 函数体 调用: 函数名() 3.关于函数的返回值 return :  返回 1.当程序没写过retur ...

  6. 【转】手动释放linux os buff/cache

    手动释放linux内存cache和脚本定时释放 标签: linuxcache脚本bufferwindows磁盘 2011-12-04 08:44 12799人阅读 评论(2) 收藏 举报  分类: l ...

  7. php socket通过smtp发送邮件(纯文本、HTML,多收件人,多抄送,多密送)

    <?php /** * 邮件发送类 * 支持发送纯文本邮件和HTML格式的邮件,可以多收件人,多抄送,多秘密抄送 * @example * $mail = new MySendMail(); * ...

  8. JSON_FORCE_OBJECT 数字索引数组 强转对象

    $abc = array('a','b','c','d','e','f','g'); echo '<pre>'; var_dump($abc); echo json_encode($abc ...

  9. hdu 1540(线段树区间合并)

    题目链接:传送门 参考文章:传送门 题意:n个数字初始连在一条线上,有三种操作, D x表示x号被摧毁: R 表示恢复剩下的通路 Q表示查询标号为x所在的串的最长长度. 思路:线段树的区间合并. #i ...

  10. 关于上级机构的冲突性测试bug修复

    描述: 1.上级机构可以为空. 2.机构添加时,选择了上级机构,在未提交前,另一用户将该机构删除,然后前一用户再提交表单,提示会保存成功,本操作应该保存失败. 思路:在上级机构不为空时,保存前进行查询 ...