前一阵在项目里需要动态生成下拉框,找了一下用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下拉框左右选择_交换内容(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. Linux内核进程调度overview(1)

    一.概述 决定何时.如何选择一个新进程运行的这组规则叫做:调度策略(scheduling policy). Linux的调度是基于分时技术(time sharing):多个进程以“时间多路复用”方式运 ...

  2. Java实现 LeetCode 189 旋转数组

    189. 旋转数组 给定一个数组,将数组中的元素向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: [1,2,3,4,5,6,7] 和 k = 3 输出: [5,6,7,1,2,3,4] ...

  3. java中ReentrantLock类的详细介绍(详解)

    博主如果看到请联系小白,小白记不清地址了 简介 ReentrantLock是一个可重入且独占式的锁,它具有与使用synchronized监视器锁相同的基本行为和语义,但与synchronized关键字 ...

  4. Java实现 蓝桥杯 历届试题 约数倍数选卡片

    问题描述 闲暇时,福尔摩斯和华生玩一个游戏: 在N张卡片上写有N个整数.两人轮流拿走一张卡片.要求下一个人拿的数字一定是前一个人拿的数字的约数或倍数.例如,某次福尔摩斯拿走的卡片上写着数字" ...

  5. [OpenGL](翻译+补充)投影矩阵的推导

    1.简介 基本是翻译和补充 http://www.songho.ca/opengl/gl_projectionmatrix.html 计算机显示器是一个2D的平面,一个3D的场景要被OpenGL渲染必 ...

  6. 小师妹学JavaIO之:目录还是文件

    目录 简介 linux中的文件和目录 目录的基本操作 目录的进阶操作 目录的腰疼操作 总结 简介 目录和文件傻傻分不清楚,目录和文件的本质到底是什么?在java中怎么操纵目录,怎么遍历目录.本文F师兄 ...

  7. https如何进行加密传输

    客户端是没有证书的,也就没有公钥和私钥. SSL握手阶段,服务器把证书传输给客户端,同时也就传输了公钥(公钥是证书的一部分). 由客户端来对这个证书进行有效性认可,再由这个客户端来生成对称密钥. 对称 ...

  8. hibernate中的映射

    hibernate中的映射是指Java类和数据库表中的属性来进行关联,然后通过类来操作数据库中,这就是简单的映射.

  9. 键盘鼠标共享效率工具----Synergy

    在日常工作中,为了提高工作效率以及用户体验,会一个主机接多个显示器,像程序员一般都是使用两块显示器. 然而,有很多人是和我一样,自己有多台电脑,两个笔记本.公司一个台式机,如何在台机器之间来回切换工作 ...

  10. 青蛙的约会 (ax+by=c求最小整数解)【拓展欧几里得】

                                                  青蛙的约会(点击跳转) 两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住 ...