正文

jQuery动态生成<select>下拉框

IP云
IP云V管理员/6 阅读
08/10
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前一阵在项目里需要动态生成下拉框，找了一下用jQuery实现比较方便，这里整理一下。

下文所述方法只是本人在项目中遇到问题的解决方法，场景较为简单，也希望能帮助有需要的朋友

1、动态生成下拉框的两种方式

（1）将数据放在model中，JSP页面用EL表达式${}取出，该方式缺点是数据更改时必须刷新整个页面，本文不过多描述。

（2）就是本文要说的jQuery动态生成了，该方式适合数据频繁变动的场景。

2、<select>组成

<select>
<option value=”aaa”>bbb</option>
</select>

以上是一般的<select>格式，可以看到其中每个选项(<option>)需要的属性有value（选择该选项的值）和test（改选项的文本），

所以我一般向前台发送个HashMap的对象，从对象中取出key和value刚好可以用于<select>的value和test

3、jQuery生成下拉框

通过Ajax请求得到下拉框所需数据并生成下拉框，直接上代码

$.ajax({
type:"GET",
url:"请求地址",
success:function(data){
for(var i in data){
$(“selector”).append(“<option value=i>“data[i]</option>
}
}
});

其中for(var i in data)可以很方便的遍历对象的属性的所有属性

4、选择<select>

好了既然已经生成下拉框了，那怎么获取下拉框中所选择的数据呢？

可以用jQuery选择到<select>中的<option>并获取其value就可以了

$(“option:selected”).val();

5、最后

本人小白一枚，进入软件行业只有一年时间，促使我开博客的缘起是因为看到了牛人刘未鹏的一篇文章《为什么你从现在开始写博客》，相关经验该文中已介绍的很详细了，朋友们觉得不够过瘾还可以买他写的《暗时间》。

jQuery动态生成<select>下拉框的更多相关文章

  1. angularjs小练习（分别通过ng-repeat和ng-option动态生成select下拉框）

    本次做一个简单的关于动态生成select的练习 在实现上有两种方式: 其一.通过ng-repeat来实现 其二.通过ng-option来实现 在页面效果上,两种实现的效果都一样 但是在数据选择的数据从 ...

  2. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  3. jquery取消选择select下拉框

    有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...

  4. jQuery插件实现select下拉框左右选择&lowbar;交换内容（multiselect2side）

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  5. 一款基于jQuery的联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  6. jQuery操作选中select下拉框的值

    js和jQuery联合操作dom真的很好用,如果不是专业前端人员的话,我觉得吧前端语言只要熟练掌握js和jQuery就可以了. 获取select下拉框的几种情况如下: 1.获取第一个option的值 ...

  7. 【jquery】ajax 动态 改变 select下拉框选中的值

    //JS<script type="text/javascript> //ajax动态给添加原料的[商品名称]下拉框绑定selected属性 $("#origin_co ...

  8. java动态生成带下拉框的Excel导入模板

    在实际开发中,由于业务需要,常常需要进行Excel导入导出操作.以前做一些简单的导入时,先准备一个模板,再进行导入,单有十几. 二十几个导入模板时,往往要做十几.二十几个模板.而且,当在模板中需要有下 ...

  9. jquery实现模拟select下拉框效果

    <IGNORE_JS_OP style="WORD-WRAP: break-word"> <!DOCTYPE html PUBLIC "-//W3C// ...

随机推荐

  1. SVProgressHUD

    原文:http://cht005288201307234627.iteye.com/blog/1927961 SVProgressHUD和MBProgressHUD效果差不多,不过不需要使用协议,同时 ...

  2. PHP之autoload理解

    举个例子就可以看懂了: 同一目录中有2个文件index.php和test.php,在test.php中定义一个test类. test.php <?php class test{ public f ...

  3. HTML 标签 表格

    <html>    --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> <body& ...

  4. 让你的APP支持iPhone5

    让你的APP支持iPhone5 前言 国庆节前,为了支持 iPhone5 的屏幕分辨率 (640 象素 x 1136 象素),我尝试着升级粉笔网 iPhone 客户端.整个过程花了大概一天的时间,我把 ...

  5. 本人常用的Linux bash快捷键&lpar;持续更新&rpar;

    按使用频率由高到低排列: Ctrl + a :移到命令行首Ctrl + e :移到命令行尾 Ctrl + u :从光标处删除至命令行首Ctrl + k :从光标处删除至命令行尾 Ctrl + d :删 ...

  6. FlexCell控件的使用

    private void grid1_GetCellText(object Sender, FlexCell.Grid.GetCellTextEventArgs e) { // 要使用虚表,可以在Gr ...

  7. 64位python安装MySQL-python 1&period;2&period;5

    在64位的python直接安装MySQL-python 1.2.5有问题,参考http://www.linuxfly.org/windows_install_mysql_python_library/ ...

  8. Spark MLlib数据类型

        MLlib支持几种数据类型:本地向量(local vectors),和存储在一个简单机器中的矩阵(matrices),以及由一个或多个RDDs组成的分布式矩阵. 1,本地向量(Local Ve ...

  9. 在c&num;中利用keep-alive处理socket网络异常断开的方法

    本文摘自 http://www.z6688.com/info/57987-1.htm 最近我负责一个IM项目的开发,服务端和客户端采用TCP协议连接.服务端采用C#开发,客户端采用Delphi开发.在 ...

  10. 【洛谷p1605】迷宫

    (还记得我昨天大概没人看到的博客(我删辽)吗qwq,2019.4.14下午交的qwq 那篇博客大致内容就是:我提交楼上这道题,交了好久好久好久好久 现在我告诉你,那次评测还N/A着呢qwq) tqlq ...