动态产生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 ...
随机推荐
- Vue单页面应用
单页面应用指一个系统只加载一次资源,然后下面的操作交互.数据交互是通过router.ajax来进 行,页面并没有刷新:<1>在vue搭建的环境里面怎么有没有公用的css和js? ...
- 2017/2/10:Manven简介与项目管理(入门)
1.Maven工程的创建 2.使用Manven manven配置文件主要集中在 http://m.blog.csdn.net/article/details?id=50316383
- 在WebGrid中做 批量删除操作
一般的MVC WebGrid都是在每一行中加入 Edit Detail Delete 这些Link 去对每条记录去单独操作. 稍微研究了一下总结一个 做批量删除的办法. 1. 首先是在WebGrid中 ...
- springMVC学习 七 视图解析器
在springMVC中,如果不配置视图解析器,会走默认的视图解析器,但是有时候配置视图解析器,还有一定的作用 <bean id="viewResolver" class=&q ...
- codeforces C. Functions again
题意:给定了一个公式,让你找到一对(l,r),求解出公式给定的F值. 当时没有想到,我把(-1)^(i-l)看成(-1)^i,然后思路就完全错了.其实这道题是个简单的dp+最长连续子序列. O(n)求 ...
- hdu6444 2018中国大学生程序设计竞赛 - 网络选拔赛 1007 Neko's loop
Neko's loop Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total S ...
- SVD(6.5.1定理证明观察3)
- java中定时器总结
java实现定时器的四种方式: 一. /** * 延迟20000毫秒执行 java.util.Timer.schedule(TimerTask task, long delay) */ public ...
- Struts2之ModelDriven和Preparable拦截器
首先struts.xml文件配置如下 默认拦截器设置为paramsPrepareParamsStack <package name="default" namespace=& ...
- 20170905工作日记--listview优化大全
1. 适配器设计模式 实例描述:我们国家的电器使用普通的扁平两项或三项插头,而去外国的话,使用的标准就不一样了,比如德国,使用的是两项圆头的插头,那么我们使用的手机充电器插头无法插到德国的插排中去,那 ...