在很久之前,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. Android相关概念

    2017-06-02 armeabi就是针对普通的或旧的arm v5 cpu,armeabi-v7a是针对有浮点运算或高级扩展功能的arm v7 cpu. armeabi-v7a(32位ARM设备), ...

  2. IOS初级:app的启动图像

    1,准备若干张适合不同设备满屏幕的图像 这里补充说明一下图像的命名方法: iphone4屏幕 Default@2x.png iphone5屏幕 Default-568h@2x.png  (568*2即 ...

  3. django网页图片验证码功能

    在一个正常的登录系统中,验证码是非常重要的,用于识别人机,毕竟我们都知道,这个世界中存在着万恶的爬虫,验证码有很多种方式,有图片的,有邮件的,有短信的,有拼图的,不管什么样的验证码,目的都是验证访问用 ...

  4. 基于Web Service的客户端框架搭建一:C#使用Http Post方式传递Json数据字符串调用Web Service

    引言 前段时间一直在做一个ERP系统,随着系统功能的完善,客户端(CS模式)变得越来越臃肿.现在想将业务逻辑层以下部分和界面层分离,使用Web Service来做.由于C#中通过直接添加引用的方来调用 ...

  5. Django高级篇一RESTful架构及API设计

    一.什么是RESTful架构? 通过互联网通信,建立在分布式体系上"客户端/服务器模式”的互联网软件,具有高并发和高延时的特点. 简单的来说,就是用开发软件的模式开发网站.网站开发,完全可以 ...

  6. python之数据库内置方法以及pymysql的使用

    一.mysql内置方法 1)视图的概念和用法 .什么是视图 视图就是通过查询得到一张虚拟表,然后保存下来,下次用的直接使用即可 .为什么要用视图 如果要频繁使用一张虚拟表,可以不用重复查询 .如何用视 ...

  7. java web实践

    语言:java.javascript 软件:eclipse.mysql 环境配置:下载jdk:配置jdk环境变量.相关教程:https://jingyan.baidu.com/article/db55 ...

  8. mysql之多表查询和pymysql模块

    一 多表查找方法 1 交叉连接:不使用任何的判断条件,生成笛卡尔积.第一个表的行数乘以第二个表的行数就等于笛卡尔积结果集的行数. mysql> select * from student,cla ...

  9. Eclipse创建Dynamic Web部署

    Eclipse创建Dynamic Web部署 http://blog.csdn.net/sweblish/article/details/6686046 Eclipse3.x中热部署项目,启动错误问题 ...

  10. Codeforces Round #548 (Div. 2) D 期望dp + 莫比乌斯反演

    https://codeforces.com/contest/1139/problem/D 题意 每次从1,m中选一个数加入队列,假如队列的gcd==1停止,问队列长度的期望 题解 概率正着推,期望反 ...