在很久之前,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. Vue修饰符

    为了方便大家写代码,vue.js给大家提供了很多方便的修饰符,比如我们经常用到的取消冒泡,阻止默认事件等等~ 目录 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符(实在不知道叫 ...

  2. 【转载】为什么任何随便输入的账号使用SYSDBA权限都能登陆oracle

    其实简单点就是检查一下你的机器有没有一个ora_dba用户组,而且你登陆os的用户是否在这个组里,有的话问题的原因就找到了,下面是转的高手的介绍 本文环境配置:Oracle10gR2,Windows ...

  3. Spark Streaming性能调优详解

    Spark Streaming性能调优详解 Spark  2015-04-28 7:43:05  7896℃  0评论 分享到微博   下载为PDF 2014 Spark亚太峰会会议资料下载.< ...

  4. AJAX-php-json数组

    1.在php中有个数组,响应回前端 $array=["习大大","川普","金三胖"];2.JS对象数据格式 ex: 数组: var TOM ...

  5. IT资产管理详解

  6. Windows AD域管理软件是什么?

    Windows AD域管理软件是什么? ADManager Plus是一个简单易用的Windows AD域管理工具,帮助域管理员简化日常的管理工作.通过直观友好的操作界面,可以执行复杂的管理操作,比如 ...

  7. 使用delphi 10.2 开发linux 上的Daemon

    delphi 10.2 支持linux, 而且官方只是支持命令行编程,目地就是做linux 服务器端的开发. 既然是做linux服务器端的开发,那么普通的命令行运行程序,然后等待开一个黑窗口的方式就 ...

  8. 31、iOS 正则表达式判断UITextField是否为全汉字,全字母,全数字,数字和字母

    判断全汉字 if ([self deptNameInputShouldChinese]) { [DemonAlertHelper showToastWithMessage:@"只能是中文&q ...

  9. 关于oracle的锁表解决session marked for kill

    oracle 使用的过程中,有时候会遇到锁表的情况,数据库增.删.改.查都是会锁表的,但是锁的类型会不同, 大多是行锁,部分会是表锁. 在oracle运行中,一直是有表在锁的,只不过很快一个操作结束, ...

  10. java常用设计模式二:工厂模式

    1.简单工厂模式(静态工厂方法模式) 抽象实例: public interface People { void talk(); } 具体实例: public class Doctor implemen ...